Merge pull request #45 from bipproduction/amalia/10-jul-24
Amalia/10 jul 24
This commit is contained in:
Amalia
@@ -0,0 +1,9 @@
|
|||||||
|
import { ViewDetailDivisionTask } from "@/module/division_new"
|
||||||
|
|
||||||
|
function Page() {
|
||||||
|
return (
|
||||||
|
<ViewDetailDivisionTask />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page
|
||||||
@@ -1,10 +1,9 @@
|
|||||||
|
import { ViewDivisionTask } from '@/module/division_new';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
function Page() {
|
function Page() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<ViewDivisionTask />
|
||||||
Page
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
import { ViewUpdateProgressDivisionTask } from "@/module/division_new"
|
||||||
|
import { DetailCreateUserProject, DetailDateEndTask, FileUploadProgres } from "@/module/project";
|
||||||
|
|
||||||
|
function Page({ searchParams }: { searchParams: any }) {
|
||||||
|
if (searchParams.page == "upload-progres") return <FileUploadProgres />;
|
||||||
|
if (searchParams.page == "detail-create-user")
|
||||||
|
return <DetailCreateUserProject />;
|
||||||
|
if (searchParams.page == "detail-date-task") return <DetailDateEndTask />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ViewUpdateProgressDivisionTask searchParams={searchParams}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Page
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
import {
|
import {
|
||||||
DetailCreateUserProject,
|
DetailCreateUserProject,
|
||||||
DetailDateEndTask,
|
DetailDateEndTask,
|
||||||
|
FileUploadProgres,
|
||||||
ViewUpdateProgres,
|
ViewUpdateProgres,
|
||||||
} from "@/module/project";
|
} from "@/module/project";
|
||||||
import FileUploadProgres from "@/module/project/components/detail_project/file_upload_progres";
|
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
@@ -13,7 +13,7 @@ function Page({ searchParams }: { searchParams: any }) {
|
|||||||
return <DetailCreateUserProject />;
|
return <DetailCreateUserProject />;
|
||||||
if (searchParams.page == "detail-date-task") return <DetailDateEndTask />;
|
if (searchParams.page == "detail-date-task") return <DetailDateEndTask />;
|
||||||
|
|
||||||
return <ViewUpdateProgres searchParams={ searchParams} />;
|
return <ViewUpdateProgres searchParams={searchParams} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Page;
|
export default Page;
|
||||||
|
|||||||
@@ -0,0 +1,89 @@
|
|||||||
|
import { WARNA } from "@/module/_global";
|
||||||
|
import { Box, Group, Flex, Avatar, Text } from "@mantine/core";
|
||||||
|
|
||||||
|
|
||||||
|
const dataAnggota = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Iqbal Ramadan",
|
||||||
|
image: "https://i.pravatar.cc/1000?img=5",
|
||||||
|
email: "iqbal.ramadan@gmail.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Doni Setiawan",
|
||||||
|
image: "https://i.pravatar.cc/1000?img=10",
|
||||||
|
email: "doni.setiawan@gmail.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Rangga Agung",
|
||||||
|
image: "https://i.pravatar.cc/1000?img=51",
|
||||||
|
email: "rangga.agung@gmail.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Ramadan Sananta",
|
||||||
|
image: "https://i.pravatar.cc/1000?img=15",
|
||||||
|
email: "ramadan@gmail.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Imam Baroni",
|
||||||
|
image: "https://i.pravatar.cc/1000?img=22",
|
||||||
|
email: "imam.baroni@gmail.com",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export default function ListAnggotaDetailTask() {
|
||||||
|
return (
|
||||||
|
<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}
|
||||||
|
>
|
||||||
|
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||||
|
Divisi Kerohanian
|
||||||
|
</Text>
|
||||||
|
{dataAnggota.map((v, i) => {
|
||||||
|
return (
|
||||||
|
<Flex
|
||||||
|
justify={"space-between"}
|
||||||
|
align={"center"}
|
||||||
|
mt={20}
|
||||||
|
key={i}
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<Avatar src={v.image} alt="it's me" size="lg" />
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||||
|
{v.name}
|
||||||
|
</Text>
|
||||||
|
<Text c={"#5A687D"} fz={14}>
|
||||||
|
{v.email}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Group>
|
||||||
|
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||||
|
Anggota
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { WARNA } from "@/module/_global";
|
||||||
|
import { Box, Group, Text } from "@mantine/core";
|
||||||
|
import { BsFiletypeCsv } from "react-icons/bs";
|
||||||
|
|
||||||
|
export default function ListFileDetailTask() {
|
||||||
|
return (
|
||||||
|
<Box pt={20}>
|
||||||
|
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
|
||||||
|
<Box bg={"white"} style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 20
|
||||||
|
}}>
|
||||||
|
<Box style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 10
|
||||||
|
}} mb={10}>
|
||||||
|
<Group>
|
||||||
|
<BsFiletypeCsv size={25} />
|
||||||
|
<Text>Proyek Laporan Permasyarakatan</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 10
|
||||||
|
}}>
|
||||||
|
<Group>
|
||||||
|
<BsFiletypeCsv size={25} />
|
||||||
|
<Text>Proyek Laporan Permasyarakatan</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { WARNA } from "@/module/_global"
|
||||||
|
import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text } from "@mantine/core"
|
||||||
|
import { AiOutlineFileSync } from "react-icons/ai"
|
||||||
|
|
||||||
|
export default function ListTugasDetailTask() {
|
||||||
|
return (
|
||||||
|
<Box pt={20}>
|
||||||
|
<Text fw={"bold"} c={WARNA.biruTua}>
|
||||||
|
Tanggal & Tugas
|
||||||
|
</Text>
|
||||||
|
<Box
|
||||||
|
bg={"white"}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid>
|
||||||
|
<Grid.Col span={"auto"}>
|
||||||
|
<Center>
|
||||||
|
<Checkbox color="teal" size="md" />
|
||||||
|
</Center>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={10}>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<AiOutlineFileSync size={25} />
|
||||||
|
<Text>Laporan Permasyarakatan</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
|
||||||
|
<Box>
|
||||||
|
<Text>Tanggal Mulai</Text>
|
||||||
|
<Group
|
||||||
|
justify="center"
|
||||||
|
bg={"white"}
|
||||||
|
h={45}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text>16 Juni 2024</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
|
||||||
|
<Group
|
||||||
|
justify="center"
|
||||||
|
bg={"white"}
|
||||||
|
h={45}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text>20 Juni 2024</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</SimpleGrid>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
'use client'
|
||||||
|
import { WARNA } from "@/module/_global";
|
||||||
|
import { Box, Grid, ActionIcon, Progress, Text } from "@mantine/core";
|
||||||
|
import { HiMiniPresentationChartBar } from "react-icons/hi2";
|
||||||
|
|
||||||
|
export default function ProgressDetailTask() {
|
||||||
|
return (
|
||||||
|
<Box mt={10}>
|
||||||
|
<Box
|
||||||
|
p={20}
|
||||||
|
bg={"#DCEED8"}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid gutter={"lg"}>
|
||||||
|
<Grid.Col span={3}>
|
||||||
|
<ActionIcon
|
||||||
|
variant="gradient"
|
||||||
|
size={68}
|
||||||
|
aria-label="Gradient action icon"
|
||||||
|
radius={100}
|
||||||
|
gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
|
||||||
|
>
|
||||||
|
<HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
|
||||||
|
</ActionIcon>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={9}>
|
||||||
|
<Box>
|
||||||
|
<Text>Kemajuan Proyek 60%</Text>
|
||||||
|
<Progress
|
||||||
|
style={{
|
||||||
|
border: `1px solid ${"#BDBDBD"}`,
|
||||||
|
}}
|
||||||
|
w={"100%"}
|
||||||
|
color="#FCAA4B"
|
||||||
|
radius="md"
|
||||||
|
size="xl"
|
||||||
|
value={60}
|
||||||
|
/>
|
||||||
|
<Text>18 Juni 2024</Text>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { WARNA } from "@/module/_global";
|
||||||
|
import { Box, Stack, SimpleGrid, Flex, Text } from "@mantine/core";
|
||||||
|
import { IoAddCircle } from "react-icons/io5";
|
||||||
|
|
||||||
|
export default function DrawerDivisionTask() {
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Stack pt={10}>
|
||||||
|
<SimpleGrid
|
||||||
|
cols={{ base: 3, sm: 3, lg: 3 }}
|
||||||
|
>
|
||||||
|
<Flex onClick={() => window.location.href = "/task/create"} justify={'center'} align={'center'} direction={'column'} >
|
||||||
|
<Box>
|
||||||
|
<IoAddCircle size={30} color={WARNA.biruTua} />
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua}>Tambah Tugas</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</SimpleGrid>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
import { WARNA } from "@/module/_global";
|
||||||
|
import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Text, TextInput, Title } from "@mantine/core";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
|
||||||
|
import { MdAccountCircle } from "react-icons/md";
|
||||||
|
|
||||||
|
|
||||||
|
const dataProject = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'Project 1',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
status: 'PROJECT SELESAI',
|
||||||
|
color: '#387529'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'Project 2',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
status: 'PROJECT SELESAI',
|
||||||
|
color: '#387529'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'Project 3',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
status: 'PROJECT SELESAI',
|
||||||
|
color: '#387529'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'Project 4',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
status: 'PROSES',
|
||||||
|
color: '#C5771A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'Project5',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
status: 'PROSES',
|
||||||
|
color: '#C5771A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'Project 6',
|
||||||
|
description: 'Tempat berkumpul semua anggota / staff perbekal darmasaba',
|
||||||
|
status: 'PROSES',
|
||||||
|
color: '#C5771A'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function ListDivisionTask({ status }: { status: string }) {
|
||||||
|
const [isList, setIsList] = useState(false)
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const handleList = () => {
|
||||||
|
setIsList(!isList)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box py={20}>
|
||||||
|
<Grid justify='center' align='center'>
|
||||||
|
<Grid.Col span={10}>
|
||||||
|
<TextInput
|
||||||
|
styles={{
|
||||||
|
input: {
|
||||||
|
color: WARNA.biruTua,
|
||||||
|
borderRadius: '#A3A3A3',
|
||||||
|
borderColor: '#A3A3A3',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
size="md"
|
||||||
|
radius={30}
|
||||||
|
leftSection={<HiMagnifyingGlass size={20} />}
|
||||||
|
placeholder="Pencarian"
|
||||||
|
/>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={'auto'}>
|
||||||
|
<Flex justify={'center'}>
|
||||||
|
{isList ? (
|
||||||
|
<HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
|
||||||
|
) : (
|
||||||
|
<HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
<Box pt={20}>
|
||||||
|
<Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
|
||||||
|
<Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
|
||||||
|
<Flex justify={'center'} align={'center'} h={'100%'}>
|
||||||
|
<Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
{isList ? (
|
||||||
|
<Box pt={20}>
|
||||||
|
{dataProject.map((v, i) => {
|
||||||
|
return (
|
||||||
|
<Box key={i}>
|
||||||
|
<Group justify="space-between" mb={10} onClick={() => router.push(`/task/${v.id}`)}>
|
||||||
|
<Group>
|
||||||
|
<Center>
|
||||||
|
<ActionIcon
|
||||||
|
variant="gradient"
|
||||||
|
size={50}
|
||||||
|
aria-label="Gradient action icon"
|
||||||
|
radius={100}
|
||||||
|
gradient={{
|
||||||
|
from: '#DFDA7C',
|
||||||
|
to: '#F2AF46',
|
||||||
|
deg: 174
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
|
||||||
|
</ActionIcon>
|
||||||
|
</Center>
|
||||||
|
<Text>{v.title}</Text>
|
||||||
|
</Group>
|
||||||
|
{/* <Box>
|
||||||
|
<RiCircleFill size={12} color={v.color} />
|
||||||
|
</Box> */}
|
||||||
|
</Group>
|
||||||
|
<Divider my="sm" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box pt={20}>
|
||||||
|
{dataProject.map((v, i) => {
|
||||||
|
return (
|
||||||
|
<Box key={i} mb={20}>
|
||||||
|
<Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/task/${v.id}`)}>
|
||||||
|
<Card.Section>
|
||||||
|
<Box h={120} bg={WARNA.biruTua}>
|
||||||
|
<Flex justify={'center'} align={'center'} h={"100%"}>
|
||||||
|
<Title order={3} c={"white"}>{v.title}</Title>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Card.Section>
|
||||||
|
<Box pt={10}>
|
||||||
|
<Progress.Root size="xl" radius="xl" style={{ border: `1px solid ${'#BDBDBD'}` }}>
|
||||||
|
<Progress.Section value={(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0} color="yellow" striped >
|
||||||
|
<Progress.Label>{(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0}%</Progress.Label>
|
||||||
|
</Progress.Section>
|
||||||
|
</Progress.Root>
|
||||||
|
<Text my={10}>{v.description}</Text>
|
||||||
|
<Group align='center' pt={10} justify='space-between'>
|
||||||
|
<Badge color={'dark'}>{status}</Badge>
|
||||||
|
<Avatar.Group>
|
||||||
|
<Avatar>
|
||||||
|
<MdAccountCircle size={32} color={WARNA.biruTua} />
|
||||||
|
</Avatar>
|
||||||
|
<Avatar>+5</Avatar>
|
||||||
|
</Avatar.Group>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
'use client'
|
||||||
|
import { LayoutNavbarNew, WARNA } from "@/module/_global";
|
||||||
|
import { ActionIcon } from "@mantine/core";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { LuClipboardEdit } from "react-icons/lu";
|
||||||
|
|
||||||
|
export default function NavbarDetailDivisionTask() {
|
||||||
|
const router = useRouter()
|
||||||
|
return (
|
||||||
|
<LayoutNavbarNew back="" title="Tugas 1" menu={
|
||||||
|
<ActionIcon
|
||||||
|
variant="light"
|
||||||
|
bg={WARNA.bgIcon}
|
||||||
|
size="lg"
|
||||||
|
radius="lg"
|
||||||
|
aria-label="Settings"
|
||||||
|
onClick={() => router.push("/task/update/1")}
|
||||||
|
>
|
||||||
|
<LuClipboardEdit size={20} color="white" />
|
||||||
|
</ActionIcon>
|
||||||
|
} />
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
'use client'
|
||||||
|
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
|
||||||
|
import { ActionIcon } from "@mantine/core";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { HiMenu } from "react-icons/hi";
|
||||||
|
import DrawerDivisionTask from "./drawer_division_task";
|
||||||
|
|
||||||
|
export default function NavbarDivisionTask() {
|
||||||
|
const [openDrawer, setOpenDrawer] = useState(false)
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<LayoutNavbarNew back="" title="Divisi - Tugas"
|
||||||
|
menu={
|
||||||
|
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||||
|
<HiMenu size={20} color='white' />
|
||||||
|
</ActionIcon>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
|
||||||
|
<DrawerDivisionTask />
|
||||||
|
</LayoutDrawer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
'use client'
|
||||||
|
import { Box, rem, Tabs } from "@mantine/core";
|
||||||
|
import { IoIosCheckmarkCircleOutline } from "react-icons/io";
|
||||||
|
import { IoCloseCircleOutline } from "react-icons/io5";
|
||||||
|
import { RiProgress3Line } from "react-icons/ri";
|
||||||
|
import { TbClockPause } from "react-icons/tb";
|
||||||
|
import ListDivisionTask from "./list_division_task";
|
||||||
|
|
||||||
|
export default function TabsDivisionTask() {
|
||||||
|
const iconStyle = { width: rem(20), height: rem(20) };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box p={20}>
|
||||||
|
<Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="segera">
|
||||||
|
<Tabs.List bg={"white"} style={{
|
||||||
|
border: `1px solid ${"#EDEDED"}`,
|
||||||
|
padding: 5,
|
||||||
|
borderRadius: 100
|
||||||
|
}}>
|
||||||
|
<Tabs.Tab value="segera" leftSection={<TbClockPause style={iconStyle} />}>
|
||||||
|
Segera
|
||||||
|
</Tabs.Tab>
|
||||||
|
<Tabs.Tab value="dikerjakan" leftSection={<RiProgress3Line style={iconStyle} />}>
|
||||||
|
Dikerjakan
|
||||||
|
</Tabs.Tab>
|
||||||
|
<Tabs.Tab value="selesai" leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}>
|
||||||
|
Selesai
|
||||||
|
</Tabs.Tab>
|
||||||
|
<Tabs.Tab value="batal" leftSection={<IoCloseCircleOutline style={iconStyle} />}>
|
||||||
|
Batal
|
||||||
|
</Tabs.Tab>
|
||||||
|
</Tabs.List>
|
||||||
|
|
||||||
|
<Tabs.Panel value="segera">
|
||||||
|
<ListDivisionTask status="segera" />
|
||||||
|
</Tabs.Panel>
|
||||||
|
|
||||||
|
<Tabs.Panel value="dikerjakan">
|
||||||
|
<ListDivisionTask status="dikerjakan" />
|
||||||
|
</Tabs.Panel>
|
||||||
|
|
||||||
|
<Tabs.Panel value="selesai">
|
||||||
|
<ListDivisionTask status="selesai" />
|
||||||
|
</Tabs.Panel>
|
||||||
|
|
||||||
|
<Tabs.Panel value="batal">
|
||||||
|
<ListDivisionTask status="batal" />
|
||||||
|
</Tabs.Panel>
|
||||||
|
</Tabs>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { Box } from "@mantine/core";
|
||||||
|
import NavbarDetailDivisionTask from "../component/navbar_detail_division_task";
|
||||||
|
import ProgressDetailTask from "../component/detail_progress_task";
|
||||||
|
import ListTugasDetailTask from "../component/detail_list_tugas_task";
|
||||||
|
import ListFileDetailTask from "../component/detail_list_file_task";
|
||||||
|
import ListAnggotaDetailTask from "../component/detail_list_anggota_task";
|
||||||
|
|
||||||
|
export default function ViewDetailDivisionTask() {
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<NavbarDetailDivisionTask />
|
||||||
|
<Box p={20}>
|
||||||
|
<ProgressDetailTask />
|
||||||
|
<ListTugasDetailTask />
|
||||||
|
<ListFileDetailTask />
|
||||||
|
<ListAnggotaDetailTask />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
'use client'
|
||||||
|
import NavbarDivisionTask from "../component/navbar_division_task";
|
||||||
|
import TabsDivisionTask from "../component/tabs_division_task";
|
||||||
|
|
||||||
|
export default function ViewDivisionTask() {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<NavbarDivisionTask />
|
||||||
|
<TabsDivisionTask />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,273 @@
|
|||||||
|
'use client'
|
||||||
|
import { LayoutNavbarNew, WARNA, LayoutDrawer } from "@/module/_global";
|
||||||
|
import { Box, Group, Grid, Center, Checkbox, SimpleGrid, Button, Flex, Text } from "@mantine/core";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { AiOutlineFileSync } from "react-icons/ai";
|
||||||
|
import { BsFiletypeCsv } from "react-icons/bs";
|
||||||
|
import { IoIosArrowDropright } from "react-icons/io";
|
||||||
|
|
||||||
|
export default function ViewUpdateProgressDivisionTask({ searchParams }: { searchParams: any }) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [openDrawer, setOpenDrawer] = useState(false);
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<LayoutNavbarNew back="" title="Progres Tugas" menu />
|
||||||
|
<Box p={20}>
|
||||||
|
<Box mb={20}>
|
||||||
|
<Group
|
||||||
|
justify="space-between"
|
||||||
|
bg={"white"}
|
||||||
|
p={10}
|
||||||
|
style={{
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
borderRadius: 10,
|
||||||
|
}}
|
||||||
|
onClick={() => setOpenDrawer(true)}
|
||||||
|
>
|
||||||
|
<Text>Upload File</Text>
|
||||||
|
<IoIosArrowDropright size={25} />
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box mb={20}>
|
||||||
|
<Group
|
||||||
|
justify="space-between"
|
||||||
|
bg={"white"}
|
||||||
|
p={10}
|
||||||
|
style={{
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
borderRadius: 10,
|
||||||
|
}}
|
||||||
|
onClick={() =>
|
||||||
|
router.push("/task/update/1?page=detail-date-task")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text>Tambah Tanggal & Tugas</Text>
|
||||||
|
<IoIosArrowDropright size={25} />
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Text fw={"bold"} c={WARNA.biruTua}>
|
||||||
|
Tanggal & Tugas
|
||||||
|
</Text>
|
||||||
|
<Box
|
||||||
|
bg={"white"}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid>
|
||||||
|
<Grid.Col span={"auto"}>
|
||||||
|
<Center>
|
||||||
|
<Checkbox color="teal" size="md" />
|
||||||
|
</Center>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={10}>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<AiOutlineFileSync size={25} />
|
||||||
|
<Text>Laporan Permasyarakatan</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
|
||||||
|
<Box>
|
||||||
|
<Text>Tanggal Mulai</Text>
|
||||||
|
<Group
|
||||||
|
justify="center"
|
||||||
|
bg={"white"}
|
||||||
|
h={45}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text>16 Juni 2024</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
|
||||||
|
<Group
|
||||||
|
justify="center"
|
||||||
|
bg={"white"}
|
||||||
|
h={45}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text>20 Juni 2024</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</SimpleGrid>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
{searchParams.tugas == "yes" && (
|
||||||
|
<>
|
||||||
|
<Grid mt={20}>
|
||||||
|
<Grid.Col span={"auto"}>
|
||||||
|
<Center>
|
||||||
|
<Checkbox color="teal" size="md" />
|
||||||
|
</Center>
|
||||||
|
</Grid.Col>
|
||||||
|
<Grid.Col span={10}>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<AiOutlineFileSync size={25} />
|
||||||
|
<Text>Laporan Dua</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
|
||||||
|
<Box>
|
||||||
|
<Text>Tanggal Mulai</Text>
|
||||||
|
<Group
|
||||||
|
justify="center"
|
||||||
|
bg={"white"}
|
||||||
|
h={45}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text>21 Juni 2024</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
<Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
|
||||||
|
<Group
|
||||||
|
justify="center"
|
||||||
|
bg={"white"}
|
||||||
|
h={45}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text>30 Juni 2024</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</SimpleGrid>
|
||||||
|
</Box>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box pt={20}>
|
||||||
|
<Text fw={"bold"} c={WARNA.biruTua}>
|
||||||
|
File
|
||||||
|
</Text>
|
||||||
|
<Box
|
||||||
|
bg={"white"}
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 20,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 10,
|
||||||
|
}}
|
||||||
|
mb={10}
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<BsFiletypeCsv size={25} />
|
||||||
|
<Text>Proyek Laporan Permasyarakatan</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
borderRadius: 10,
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Group>
|
||||||
|
<BsFiletypeCsv size={25} />
|
||||||
|
<Text>Proyek Laporan Permasyarakatan</Text>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box mt="xl">
|
||||||
|
<Button
|
||||||
|
color="white"
|
||||||
|
bg={WARNA.biruTua}
|
||||||
|
size="lg"
|
||||||
|
radius={30}
|
||||||
|
fullWidth
|
||||||
|
onClick={() => router.push("/task/1")}
|
||||||
|
>
|
||||||
|
Simpan
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<LayoutDrawer
|
||||||
|
opened={openDrawer}
|
||||||
|
onClose={() => setOpenDrawer(false)}
|
||||||
|
title={"Pilih File"}
|
||||||
|
>
|
||||||
|
<Flex justify={"space-around"}>
|
||||||
|
<Box onClick={() => ""}>
|
||||||
|
<Box
|
||||||
|
bg={"#DCEED8"}
|
||||||
|
style={{
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 20,
|
||||||
|
borderRadius: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Center>
|
||||||
|
<BsFiletypeCsv size={40} />
|
||||||
|
</Center>
|
||||||
|
</Box>
|
||||||
|
<Text mt={10} ta={"center"}>
|
||||||
|
Pilih file
|
||||||
|
</Text>
|
||||||
|
<Text ta={"center"}>diperangkat</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
onClick={() =>
|
||||||
|
router.push("/task/update/1?page=upload-progres")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
bg={"#DCEED8"}
|
||||||
|
style={{
|
||||||
|
border: `1px solid ${"#D6D8F6"}`,
|
||||||
|
padding: 20,
|
||||||
|
borderRadius: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Center>
|
||||||
|
<BsFiletypeCsv size={40} />
|
||||||
|
</Center>
|
||||||
|
</Box>
|
||||||
|
<Text mt={10} ta={"center"}>
|
||||||
|
Pilih file yang
|
||||||
|
</Text>
|
||||||
|
<Text ta={"center"}>sudah ada</Text>
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</LayoutDrawer>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,3 +1,6 @@
|
|||||||
|
import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task";
|
||||||
|
import ViewDivisionTask from "./_division_fitur/task/view/view_division_task";
|
||||||
|
import ViewUpdateProgressDivisionTask from "./_division_fitur/task/view/view_update_progress_division_task";
|
||||||
import CreateAdminDivision from "./components/create_admin_division";
|
import CreateAdminDivision from "./components/create_admin_division";
|
||||||
import CreateUsers from "./components/create_users";
|
import CreateUsers from "./components/create_users";
|
||||||
import ViewCreateDivision from "./view/view_create_division";
|
import ViewCreateDivision from "./view/view_create_division";
|
||||||
@@ -10,4 +13,7 @@ export { ViewCreateDivision }
|
|||||||
export { CreateUsers }
|
export { CreateUsers }
|
||||||
export { CreateAdminDivision }
|
export { CreateAdminDivision }
|
||||||
export { ViewCreateReport }
|
export { ViewCreateReport }
|
||||||
export { ViewDetailDivision }
|
export { ViewDetailDivision }
|
||||||
|
export { ViewDivisionTask }
|
||||||
|
export { ViewDetailDivisionTask }
|
||||||
|
export { ViewUpdateProgressDivisionTask }
|
||||||
@@ -8,6 +8,7 @@ import ViewUpdateProgres from "./view/view_update_progres";
|
|||||||
import DetailCreateUserProject from "./components/detail_project/detail_create_user_project";
|
import DetailCreateUserProject from "./components/detail_project/detail_create_user_project";
|
||||||
import DetailDateEndTask from "./components/detail_project/detail_date_end_task";
|
import DetailDateEndTask from "./components/detail_project/detail_date_end_task";
|
||||||
import DetailFileSave from "./components/detail_project/detail_file_save";
|
import DetailFileSave from "./components/detail_project/detail_file_save";
|
||||||
|
import FileUploadProgres from "./components/detail_project/file_upload_progres";
|
||||||
|
|
||||||
export { ViewProject }
|
export { ViewProject }
|
||||||
export { ViewCreateProject }
|
export { ViewCreateProject }
|
||||||
@@ -18,4 +19,5 @@ export { ViewDetailProject }
|
|||||||
export { ViewUpdateProgres }
|
export { ViewUpdateProgres }
|
||||||
export { DetailCreateUserProject }
|
export { DetailCreateUserProject }
|
||||||
export { DetailDateEndTask }
|
export { DetailDateEndTask }
|
||||||
export { DetailFileSave }
|
export { DetailFileSave }
|
||||||
|
export { FileUploadProgres }
|
||||||
Reference in New Issue
Block a user