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-11 14:06:45 +08:00
parent 22302c2d0a
commit e5282e90ba
15 changed files with 649 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/module/division_new/components/create_admin_division.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import NavbarAdminDivision from './ui/navbar_admin_division';
export default function CreateAdminDivision() {
return (
<NavbarAdminDivision />
);
}

143
src/module/division_new/components/create_division.tsx Normal file
View File

@@ -0,0 +1,143 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import {
Avatar,
Box,
Button,
Flex,
Group,
Select,
Stack,
Text,
Textarea,
TextInput,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import React from "react";
import { IoIosArrowDropright } from "react-icons/io";
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 CreateDivision() {
const router = useRouter();
return (
<Box>
<LayoutNavbarNew back="/division" title="Tambah 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" radius={10} />
<Box onClick={() => router.push("/division/create?page=anggota")}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Box pt={20}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total 10 Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{dataUser.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
>
<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"}>
Anggota
</Text>
</Flex>
);
})}
</Box>
</Box>
</Box>
</Box>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push("/division/create?page=pilih-admin")}
>
Simpan
</Button>
</Box>
</Stack>
</Box>
</Box>
);
}

35
src/module/division_new/components/create_report.tsx Normal file
View File

@@ -0,0 +1,35 @@
"use client"
import { LayoutNavbarNew } from '@/module/_global';
import { Box, Select, Stack } from '@mantine/core';
import { DateInput } from '@mantine/dates';
import React, { useState } from 'react';
export default function CreateReport() {
const [value, setValue] = useState<Date | null>(null);
return (
<Box>
<LayoutNavbarNew back="/division" title="Report Divisi" menu />
<Box p={20}>
<Stack>
<Select
placeholder="Grup"
label="Grup"
size="md"
required
radius={10}
/>
<DateInput
value={value}
onChange={setValue}
radius={10}
size="md"
required
label="Date input"
placeholder="Date input"
/>
</Stack>
</Box>
</Box>
);
}

9
src/module/division_new/components/create_users.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import NavbarCreateUsers from './ui/navbar_create_users';
export default function CreateUsers() {
return (
<NavbarCreateUsers/>
);
}

37
src/module/division_new/components/detail_division/carousel_division.tsx Normal file
View File

@@ -0,0 +1,37 @@
'use client'
import React, { useRef } from 'react';
import { Carousel } from '@mantine/carousel';
import { WARNA } from '@/module/_global';
import Autoplay from 'embla-carousel-autoplay';
import { Flex, Text } from '@mantine/core';
export default function CarouselDivision() {
const autoplay = useRef(Autoplay({ delay: 5000 }));
return (
<>
<Carousel
withIndicators
height={150}
plugins={[autoplay.current]}
onMouseEnter={autoplay.current.stop}
onMouseLeave={autoplay.current.reset}
>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
<Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
<Flex justify={'center'} h={"100%"} align={'center'}>
<Text c={"white"}>INFORMASI DARMASABA</Text>
</Flex>
</Carousel.Slide>
</Carousel>
</>
);
}

20
src/module/division_new/components/detail_division/detail_division.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Box, Stack } from '@mantine/core';
import React from 'react';
import CarouselDivision from './carousel_division';
import { LayoutNavbarNew } from '@/module/_global';
import FeatureDetailDivision from './feature_detail_division';
export default function DetailDivision() {
return (
<Box>
<LayoutNavbarNew back="/division" title={"Divisi kerohanian"} menu />
<Box p={20}>
<Stack>
<CarouselDivision />
<FeatureDetailDivision />
</Stack>
</Box>
</Box>
);
}

131
src/module/division_new/components/detail_division/feature_detail_division.tsx Normal file
View File

@@ -0,0 +1,131 @@
"use client"
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
import React from 'react';
import { HiMiniUserGroup } from 'react-icons/hi2';
import { IoIosArrowRoundForward } from 'react-icons/io';
import { LuClipboardEdit } from "react-icons/lu";
import { GoCommentDiscussion } from "react-icons/go";
import { BsFileEarmarkText } from "react-icons/bs";
import { IoCalendarOutline } from "react-icons/io5";
import { LuFileSignature } from "react-icons/lu";
import { useRouter } from 'next/navigation';
export default function FeatureDetailDivision() {
const router = useRouter()
return (
<Box pt={10}>
<Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
style={{
alignItems: "center",
alignContent: "center"
}}
>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push('/task')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<LuClipboardEdit size={25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{base: 7, md: 9}}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Tugas</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>
</Grid>
</Box>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push('/documents')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<BsFileEarmarkText size={25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{base: 7, md: 9}}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Dokumen</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>
</Grid>
</Box>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push('/discussion')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<GoCommentDiscussion size={25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{base: 7, md: 9}}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Diskusi</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>
</Grid>
</Box>
<Box bg={'white'} style={{
border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10,
padding: 10
}} onClick={() => router.push('/calender')}>
<Grid justify='center' align='center'>
<Grid.Col span={"auto"}>
<ActionIcon variant="filled"
size={"xl"}
aria-label="Gradient action icon"
radius={100}
color={WARNA.bgHijauMuda}
>
<IoCalendarOutline size={25} color={WARNA.biruTua} />
</ActionIcon>
</Grid.Col>
<Grid.Col span={{base: 7, md: 9}}>
<Text fz={15} c={WARNA.biruTua} fw={"bold"}>Kalender</Text>
<Group justify='space-between' align='center'>
<Text fz={10} c={"gray"}>23 Tugas</Text>
<IoIosArrowRoundForward size={20} color='gray' />
</Group>
</Grid.Col>
</Grid>
</Box>
</SimpleGrid>
</Box>
);
}

12
src/module/division_new/components/ui/drawer_division.tsx
View File

@@ -8,14 +8,14 @@ import { IoAddCircle } from 'react-icons/io5';
import { TbReportAnalytics } from "react-icons/tb"; import { TbReportAnalytics } from "react-icons/tb";
export default function DrawerDivision() { export default function DrawerDivision() {
const router = useRouter() const router = useRouter()
return ( return (
<Box> <Box>
<Stack pt={10}> <Stack pt={10}>
<SimpleGrid <SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }} cols={{ base: 3, sm: 3, lg: 3 }}
> >
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => router.push('/division/create')} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<IoAddCircle size={30} color={WARNA.biruTua} /> <IoAddCircle size={30} color={WARNA.biruTua} />
</Box> </Box>
@@ -23,7 +23,9 @@ export default function DrawerDivision() {
<Text c={WARNA.biruTua}>Tambah Proyek</Text> <Text c={WARNA.biruTua}>Tambah Proyek</Text>
</Box> </Box>
</Flex> </Flex>
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => {
router.push('/division?page=filter')
}} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<HiOutlineFilter size={30} color={WARNA.biruTua} /> <HiOutlineFilter size={30} color={WARNA.biruTua} />
</Box> </Box>
@@ -31,7 +33,9 @@ export default function DrawerDivision() {
<Text c={WARNA.biruTua}>Filter</Text> <Text c={WARNA.biruTua}>Filter</Text>
</Box> </Box>
</Flex> </Flex>
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} > <Flex onClick={() => {
router.push('/division?page=report')
}} justify={'center'} align={'center'} direction={'column'} >
<Box> <Box>
<TbReportAnalytics size={30} color={WARNA.biruTua} /> <TbReportAnalytics size={30} color={WARNA.biruTua} />
</Box> </Box>

98
src/module/division_new/components/ui/navbar_admin_division.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Checkbox, Divider, Flex, Group, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
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 NavbarAdminDivision() {
const router = useRouter()
return (
<Box>
<LayoutNavbarNew back="/division/create" title="Pilih Anggota" menu />
<Box p={20}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
<Box pt={20}>
{dataUser.map((v, i) => {
return (
<Box key={i}>
<Flex
justify={"space-between"}
align={"center"}
>
<Group>
<Avatar src={v.img} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
</Box>
</Group>
<Checkbox />
</Flex>
<Divider my={20} />
</Box>
);
})}
</Box>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push("/division")}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

120
src/module/division_new/components/ui/navbar_create_users.tsx Normal file
View File

@@ -0,0 +1,120 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Avatar, Box, Button, Center, Input, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { BsFiletypeCsv } from 'react-icons/bs';
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 NavbarCreateUsers() {
const router = useRouter()
const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
const handleFileClick = (index: number) => {
setSelectedFiles((prevSelectedFiles) => ({
...prevSelectedFiles,
[index]: !prevSelectedFiles[index],
}));
};
return (
<Box>
<LayoutNavbarNew back="/division/create" title="Pilih 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"
/>
<Box pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataUser.map((v, index) => {
const isSelected = selectedFiles[index];
return (
<Box key={index} mb={20}>
<Box
style={{
border: `${isSelected ? "2px solid #FFC107" : `1px solid ${WARNA.biruTua}`}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={v.img} alt="it's me" size="xl" />
</Center>
<Text mt={20} ta="center">
{v.name}
</Text>
</Box>
</Box>
);
})}
</SimpleGrid>
</Box>
</Stack>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push("/division/create")}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

4
src/module/division_new/components/ui/navbar_division.tsx
View File

@@ -96,7 +96,7 @@ export default function NavbarDivision() {
{dataDivisi.map((v, i) => { {dataDivisi.map((v, i) => {
return ( return (
<Box key={i}> <Box key={i}>
<Group justify="space-between" mb={10} onClick={() => router.push(``)}> <Group justify="space-between" mb={10} onClick={() => router.push(`/division/${v.id}`)}>
<Group> <Group>
<Center> <Center>
<ActionIcon <ActionIcon
@@ -126,7 +126,7 @@ export default function NavbarDivision() {
{dataDivisi.map((v, i) => { {dataDivisi.map((v, i) => {
return ( return (
<Box key={i} mb={20}> <Box key={i} mb={20}>
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}> <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
<Card.Section> <Card.Section>
<Box h={120} bg={WARNA.biruTua}> <Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}> <Flex justify={'center'} align={'center'} h={"100%"}>

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

@@ -1,3 +1,13 @@
import CreateAdminDivision from "./components/create_admin_division";
import CreateUsers from "./components/create_users";
import ViewCreateDivision from "./view/view_create_division";
import ViewCreateReport from "./view/view_create_report";
import ViewDetailDivision from "./view/view_detail_division";
import ViewDivision from "./view/view_division"; import ViewDivision from "./view/view_division";
export { ViewDivision } export { ViewDivision }
export { ViewCreateDivision }
export { CreateUsers }
export { CreateAdminDivision }
export { ViewCreateReport }
export { ViewDetailDivision }

8
src/module/division_new/view/view_create_division.tsx Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import CreateDivision from '../components/create_division';
export default function ViewCreateDivision() {
return (
<CreateDivision/>
);
}

9
src/module/division_new/view/view_create_report.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import CreateReport from '../components/create_report';
export default function ViewCreateReport() {
return (
<CreateReport/>
);
}

9
src/module/division_new/view/view_detail_division.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
import DetailDivision from '../components/detail_division/detail_division';
export default function ViewDetailDivision() {
return (
<DetailDivision />
);
}