Merge pull request #43 from bipproduction/lukman/10-juli-2024
Lukman/10 juli 2024
This commit is contained in:
11
src/app/(application)/(detail-division)/calender/page.tsx
Normal file
11
src/app/(application)/(detail-division)/calender/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Page
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
11
src/app/(application)/(detail-division)/discussion/page.tsx
Normal file
11
src/app/(application)/(detail-division)/discussion/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Page
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
11
src/app/(application)/(detail-division)/documents/page.tsx
Normal file
11
src/app/(application)/(detail-division)/documents/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Page
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
11
src/app/(application)/(detail-division)/task/page.tsx
Normal file
11
src/app/(application)/(detail-division)/task/page.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<div>
|
||||
Page
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
10
src/app/(application)/division/[id]/page.tsx
Normal file
10
src/app/(application)/division/[id]/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { ViewDetailDivision } from '@/module/division_new';
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<ViewDetailDivision />
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
14
src/app/(application)/division/create/page.tsx
Normal file
14
src/app/(application)/division/create/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { CreateAdminDivision, CreateUsers, ViewCreateDivision } from '@/module/division_new';
|
||||
import React from 'react';
|
||||
|
||||
function Page({ searchParams }: { searchParams: { page: string } }) {
|
||||
if (searchParams.page == "anggota")
|
||||
return <CreateUsers />
|
||||
if (searchParams.page == "pilih-admin")
|
||||
return <CreateAdminDivision />
|
||||
return (
|
||||
<ViewCreateDivision/>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
@@ -1,8 +1,13 @@
|
||||
|
||||
import { ViewDivision } from '@/module/division_new';
|
||||
import { ViewFilter } from '@/module/_global';
|
||||
import { ViewCreateReport, ViewDivision } from '@/module/division_new';
|
||||
import React from 'react';
|
||||
|
||||
function Page() {
|
||||
function Page({ searchParams }: { searchParams: { page: string } }) {
|
||||
if (searchParams.page == "filter")
|
||||
return <ViewFilter />
|
||||
if (searchParams.page == "report")
|
||||
return <ViewCreateReport />
|
||||
return (
|
||||
<ViewDivision/>
|
||||
);
|
||||
|
||||
@@ -2,5 +2,6 @@ export const WARNA = {
|
||||
bgWhite: "#F4F9FD",
|
||||
biruTua: "#19345E",
|
||||
bgIcon: "#384288",
|
||||
borderOrange: "#FCAA4B"
|
||||
borderOrange: "#FCAA4B",
|
||||
bgHijauMuda: "#DCEED8"
|
||||
}
|
||||
@@ -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
143
src/module/division_new/components/create_division.tsx
Normal 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
35
src/module/division_new/components/create_report.tsx
Normal 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
9
src/module/division_new/components/create_users.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import NavbarCreateUsers from './ui/navbar_create_users';
|
||||
|
||||
export default function CreateUsers() {
|
||||
return (
|
||||
<NavbarCreateUsers/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -8,14 +8,14 @@ import { IoAddCircle } from 'react-icons/io5';
|
||||
import { TbReportAnalytics } from "react-icons/tb";
|
||||
|
||||
export default function DrawerDivision() {
|
||||
const router = useRouter()
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid
|
||||
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>
|
||||
<IoAddCircle size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
@@ -23,7 +23,9 @@ export default function DrawerDivision() {
|
||||
<Text c={WARNA.biruTua}>Tambah Proyek</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Flex onClick={() => {
|
||||
router.push('/division?page=filter')
|
||||
}} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<HiOutlineFilter size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
@@ -31,7 +33,9 @@ export default function DrawerDivision() {
|
||||
<Text c={WARNA.biruTua}>Filter</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex onClick={() => ""} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Flex onClick={() => {
|
||||
router.push('/division?page=report')
|
||||
}} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<TbReportAnalytics size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
|
||||
@@ -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
120
src/module/division_new/components/ui/navbar_create_users.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -96,7 +96,7 @@ export default function NavbarDivision() {
|
||||
{dataDivisi.map((v, i) => {
|
||||
return (
|
||||
<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>
|
||||
<Center>
|
||||
<ActionIcon
|
||||
@@ -126,7 +126,7 @@ export default function NavbarDivision() {
|
||||
{dataDivisi.map((v, i) => {
|
||||
return (
|
||||
<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>
|
||||
<Box h={120} bg={WARNA.biruTua}>
|
||||
<Flex justify={'center'} align={'center'} h={"100%"}>
|
||||
|
||||
@@ -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";
|
||||
|
||||
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
8
src/module/division_new/view/view_create_division.tsx
Normal 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
9
src/module/division_new/view/view_create_report.tsx
Normal 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
9
src/module/division_new/view/view_detail_division.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import DetailDivision from '../components/detail_division/detail_division';
|
||||
|
||||
export default function ViewDetailDivision() {
|
||||
return (
|
||||
<DetailDivision />
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user