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

upd: project

Browse Source 
Deskripsi:
- tambah project

- update tb project

NO Issues
This commit is contained in:
amel
2024-08-23 17:34:35 +08:00
parent 5417b48af1
commit df2f61e833
22 changed files with 769 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/module/project/components/create_date_end_task.tsx
View File

@@ -1,187 +0,0 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import {
Avatar,
Box,
Button,
Flex,
Group,
Input,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
import moment from "moment";
import { IoIosArrowDropright } from "react-icons/io";
import { useRouter } from "next/navigation";
const dataTugas = [
{
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 ViewDateEndTask({ kategori }: { kategori: string }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
return (
<Box>
<LayoutNavbarNew back="" title={"Tanggal Tugas"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<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>{value[0] ? `${value[0].toLocaleDateString()}` : ""}</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>{value[1] ? `${value[1].toLocaleDateString()}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
size="md"
/>
<Box onClick={() => router.push(`/${kategori}/create?page=create-users`)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text c={WARNA.biruTua}>Tambah Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
</Stack>
<Box pt={30}>
<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>
{dataTugas.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>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push(`/${kategori}/create?anggota=yes`)}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

156
src/module/project/components/create_project.tsx
View File

@@ -1,156 +0,0 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Box, Button, Center, Flex, Group, Select, Stack, Text, TextInput } from "@mantine/core";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
import { BsFiletypeCsv } from "react-icons/bs";
import ResultsDateAndTask from "./results_date-and_task";
import ResultsFile from "./results_file";
import LayoutModal from "@/module/_global/layout/layout_modal";
import toast from "react-hot-toast";
export default function CreateProject({ searchParams }: { searchParams: any }) {
const router = useRouter();
const [openDrawer, setOpenDrawer] = useState(false);
const [isModal, setModal] = useState(false)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
router.push('/project')
}
setModal(false)
}
return (
<Box>
<LayoutNavbarNew back="/project" title="tambah proyek" menu />
<Box p={20}>
<Stack>
<Select
placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
data={['Dinas', 'Adat', 'LPD', 'PKK']}
/>
<TextInput
label="Proyek"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required withAsterisk
placeholder="Nama Proyek"
size="md"
/>
<Box onClick={() => router.push("/project/create?page=task")}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Tanggal & Tugas</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
onClick={() => setOpenDrawer(true)}
>
<Text>Upload File</Text>
<IoIosArrowDropright size={25} />
</Group>
</Stack>
{
(searchParams.anggota == 'yes') &&
<>
<ResultsDateAndTask />
</>
}
{(searchParams.files == 'yes') &&
<>
<ResultsFile />
</>
}
{
(searchParams.button == 'yes') &&
<>
<Box mt="xl">
<Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => setModal(true)}>
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("/project/create?page=file-save")}>
<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>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin mengubah data?"
onYes={(val) => { onTrue(val) }} />
</Box >
);
}

114
src/module/project/components/create_users_project.tsx
View File

@@ -1,114 +0,0 @@
"use client"
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import {
Anchor,
Avatar,
Box,
Button,
Checkbox,
Divider,
Flex,
Group,
Text,
TextInput,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import React from "react";
import { HiMagnifyingGlass } from "react-icons/hi2";
const DateUsers = [
{
id: 1,
name: "Iqbal Ramadan",
image: "https://i.pravatar.cc/1000?img=5",
},
{
id: 2,
name: "Doni Setiawan",
image: "https://i.pravatar.cc/1000?img=10",
},
{
id: 3,
name: "Rangga Agung",
image: "https://i.pravatar.cc/1000?img=51",
},
{
id: 4,
name: "Ramadan Sananta",
image: "https://i.pravatar.cc/1000?img=15",
},
{
id: 5,
name: "Imam Baroni",
image: "https://i.pravatar.cc/1000?img=22",
},
];
export default function CreateUsersProject({ kategori }: { kategori: string }) {
const router = useRouter()
return (
<Box>
<LayoutNavbarNew
back=""
title="Pilih Anggota"
menu
/>
<Box p={20}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
<Flex justify={"space-between"} mt={20}>
<Text c={WARNA.biruTua} fw={"bold"}>
Pilih Semua Divisi
</Text>
<Checkbox defaultChecked color="teal" size="md" />
</Flex>
<Flex justify={"space-between"} mt={20}>
<Text c={WARNA.biruTua} fw={"bold"}>
Divisi Kerohanian
</Text>
<Anchor>Pilih Semua</Anchor>
</Flex>
<Box mt={15}>
{DateUsers.map((v, i) => {
return (
<Box mb={15} key={i}>
<Flex justify={"space-between"} align={"center"}>
<Group>
<Avatar src={v.image} alt="it's me" size="lg" />
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
</Group>
<Checkbox defaultChecked color="teal" size="md" />
</Flex>
<Divider my={"md"} />
</Box>
);
})}
</Box>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push(`/${kategori}/create?page=task`)}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

6
src/module/project/components/detail_project/detail_project.tsx
View File

@@ -16,8 +16,8 @@ import {
import React from "react";
import { HiMiniPresentationChartBar } from "react-icons/hi2";
import { IoIosArrowDropright } from "react-icons/io";
import ResultsDateAndTask from "../results_date-and_task";
import ResultsFile from "../results_file";
import ResultsDateAndTask from "../../ui/results_date-and_task";
import ResultsFile from "../../ui/results_file";
import { AiOutlineFileSync } from "react-icons/ai";
import { useRouter } from "next/navigation";
import { LuClipboardEdit } from "react-icons/lu";
@@ -181,7 +181,7 @@ export default function DetailProject() {
</Grid>
</Box>
</Box>
<ResultsFile />
{/* <ResultsFile /> */}
<Box pt={20}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>

38
src/module/project/components/results_file.tsx
View File

@@ -1,38 +0,0 @@
import { WARNA } from '@/module/_global';
import { Box, Group, Text } from '@mantine/core';
import React from 'react';
import { BsFiletypeCsv } from 'react-icons/bs';
export default function ResultsFile() {
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>
);
}

10
src/module/project/index.ts
View File

@@ -1,7 +1,6 @@
import ViewCreateProject from "./view/view_create_project";
import ViewDateEndTask from "./components/create_date_end_task";
import ViewDateEndTask from "./ui/create_date_end_task";
import ViewProject from "./view/view_project";
import CreateUsersProject from "./components/create_users_project";
import CreateUsersProject from "./ui/create_users_project";
import ViewFileSave from "./view/view_file_save";
import ViewDetailProject from "./view/view_detail_project";
import ViewUpdateProgres from "./view/view_update_progres";
@@ -21,9 +20,9 @@ import ListAnggotaDetailProject from "./ui/list_anggota_detail_project";
import AddDetailTaskProject from "./ui/add_detail_task_project";
import CancelProject from "./ui/cancel_project";
import AddMemberDetailProject from "./ui/add_member_detail_project";
import CreateProject from "./ui/create_project";
export { ViewProject }
export { ViewCreateProject }
export { ViewDateEndTask }
export { CreateUsersProject }
export { ViewFileSave }
@@ -43,4 +42,5 @@ export { EditTaskProject }
export { EditDetailTaskProject }
export { AddDetailTaskProject }
export { CancelProject }
export { AddMemberDetailProject }
export { AddMemberDetailProject }
export { CreateProject }

3
src/module/project/lib/api_project.ts
View File

@@ -7,6 +7,9 @@ export const funGetAllProject = async (path?: string) => {
}
export const funCreateProject = async (data: IFormProject) => {
if (data.title.length < 3)
return { success: false, message: 'Nama proyek minimal 3 karakter' }
const response = await fetch(`/api/project`, {
method: "POST",
headers: {

13
src/module/project/lib/type_project.ts
View File

@@ -1,6 +1,6 @@
export interface IDataProject {
id: string
name: string
title: string
desc: string
status: number
member: number
@@ -29,8 +29,8 @@ export interface IDataMemberProject {
}
export interface IFormProject {
idDivision: string,
name: string,
title: string,
idGroup: string,
task: IFormDateProject[] | [],
member: IFormMemberProject[] | [],
file: FormData[] | []
@@ -39,7 +39,7 @@ export interface IFormProject {
export interface IFormDateProject {
dateStart: Date,
dateEnd: Date,
name: string,
title: string,
}
export interface IFormMemberProject {
@@ -64,4 +64,9 @@ export interface IDataMemberProjectDetail {
idUser: string,
isLeader: string,
name: string
}
export interface IListFileTaskProject {
name: string,
extension: string
}

2
src/module/project/lib/val_project.ts
View File

@@ -1,6 +1,8 @@
import { hookstate } from "@hookstate/core";
import { IFormMemberProject } from "./type_project";
export const globalRefreshProject = hookstate<boolean>(false)
export const globalMemberProject = hookstate<IFormMemberProject[]>([]);
export const valStatusDetailProject = [
{

116
src/module/project/ui/create_date_end_task.tsx Normal file
View File

@@ -0,0 +1,116 @@
"use client";
import { LayoutNavbarNew, WARNA } from "@/module/_global";
import {
Avatar,
Box,
Button,
Flex,
Group,
Input,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import React, { useState } from "react";
import { DatePicker } from "@mantine/dates";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import moment from "moment";
import { IFormDateProject } from "../lib/type_project";
export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateProject) => void }) {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
const router = useRouter()
const [title, setTitle] = useState("")
function onSubmit() {
if (value[0] == null || value[1] == null)
return toast.error("Error! harus memilih tanggal")
if (title == "")
return toast.error("Error! harus memasukkan judul tugas")
onClose(
{
dateStart: value[0],
dateEnd: value[1],
title: title
}
)
}
return (
<Box>
<LayoutNavbarNew back="" title={"Tanggal Tugas"} menu />
<Box p={20}>
<Group
justify="center"
bg={"white"}
py={20}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<DatePicker
styles={{}}
type="range"
value={value}
onChange={setValue}
size="md"
c={WARNA.biruTua}
/>
</Group>
<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>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</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>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
</Group>
</Box>
</SimpleGrid>
<Stack pt={15}>
<Input
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
placeholder="Input Nama Tahapan"
size="md"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</Stack>
<Box mt={"xl"}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

416
src/module/project/ui/create_project.tsx Normal file
View File

@@ -0,0 +1,416 @@
"use client";
import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
import { Avatar, Box, Button, Center, Flex, Group, Select, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation";
import React, { useRef, useState } from "react";
import { IoIosArrowDropright } from "react-icons/io";
import { BsFiletypeCsv } from "react-icons/bs";
import ResultsDateAndTask from "./results_date-and_task";
import ResultsFile from "./results_file";
import LayoutModal from "@/module/_global/layout/layout_modal";
import toast from "react-hot-toast";
import { funGetAllGroup, IDataGroup } from "@/module/group";
import { funGetUserByCookies } from "@/module/auth";
import { useShallowEffect } from "@mantine/hooks";
import { useHookstate } from "@hookstate/core";
import { globalMemberProject } from "../lib/val_project";
import ViewDateEndTask from "./create_date_end_task";
import { IFormDateProject, IFormMemberProject, IListFileTaskProject } from "../lib/type_project";
import CreateUsersProject from "./create_users_project";
import { FaTrash } from "react-icons/fa6";
import { Dropzone } from "@mantine/dropzone";
import _ from "lodash";
import { funCreateProject } from "../lib/api_project";
export default function CreateProject() {
const router = useRouter();
const [openDrawer, setOpenDrawer] = useState(false)
const [openDrawerFile, setOpenDrawerFile] = useState(false)
const [openDrawerTask, setOpenDrawerTask] = useState(false)
const [isModal, setModal] = useState(false)
const [dataGroup, setDataGroup] = useState<IDataGroup[]>([]);
const [roleUser, setRoleUser] = useState<any>("")
const [isChooseAnggota, setChooseAnggota] = useState(false)
const member = useHookstate(globalMemberProject)
const memberValue = member.get() as IFormMemberProject[]
const [openTugas, setOpenTugas] = useState(false)
const [dataTask, setDataTask] = useState<IFormDateProject[]>([])
const openRef = useRef<() => void>(null)
const [fileForm, setFileForm] = useState<FormData[]>([])
const [listFile, setListFile] = useState<IListFileTaskProject[]>([])
const [indexDelFile, setIndexDelFile] = useState<number>(0)
const [indexDelTask, setIndexDelTask] = useState<number>(0)
const [body, setBody] = useState<any>({
idGroup: "",
title: "",
desc: "",
});
function deleteFile(index: number) {
setListFile([...listFile.filter((val, i) => i !== index)])
setFileForm([...fileForm.filter((val, i) => i !== index)])
setOpenDrawerFile(false)
}
function deleteTask(index: number) {
setDataTask([...dataTask.filter((val, i) => i !== index)])
setOpenDrawerTask(false)
}
async function loadData() {
const loadGroup = await funGetAllGroup('?active=true')
if (loadGroup.success) {
setDataGroup(loadGroup.data);
} else {
toast.error(loadGroup.message);
}
const loadUser = await funGetUserByCookies();
setRoleUser(loadUser.idUserRole)
}
function onToChooseAnggota() {
if (roleUser == "supadmin" && body.idGroup == "")
return toast.error("Error! grup harus diisi")
setChooseAnggota(true)
}
function onChooseGroup(val: any) {
member.set([])
setBody({ ...body, idGroup: val })
}
useShallowEffect(() => {
loadData();
}, []);
async function onSubmit() {
try {
const response = await funCreateProject({ title: body.title, idGroup: body.idGroup, task: dataTask, file: fileForm, member: memberValue })
if (response.success) {
toast.success(response.message)
setBody({
idGroup: "",
title: "",
desc: "",
})
member.set([])
setFileForm([])
setListFile([])
setDataTask([])
} else {
toast.error(response.message)
}
} catch (error) {
console.log(error)
toast.error("Gagal menambahkan tugas divisi, coba lagi nanti");
}
}
if (openTugas) return <ViewDateEndTask onClose={(val) => {
setDataTask([...dataTask, val])
setOpenTugas(false)
}} />;
if (isChooseAnggota) return <CreateUsersProject grup={body.idGroup} onClose={() => { setChooseAnggota(false) }} />
return (
<Box>
<LayoutNavbarNew back="/project" title="tambah proyek" menu />
<Box p={20}>
<Stack>
{
(roleUser == "supadmin") && (
<Select
placeholder="Grup"
label="Grup"
size="md"
required
radius={40}
data={dataGroup?.map((pro: any) => ({
value: String(pro.id),
label: pro.name
}))}
onChange={(val) => {
onChooseGroup(val)
}}
value={(body.idGroup=="")?null:body.idGroup}
/>
)
}
<TextInput
label="Proyek"
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
},
}}
required withAsterisk
placeholder="Nama Proyek"
size="md"
value={body.title}
onChange={(e) => setBody({ ...body, title: e.target.value })}
/>
<Box onClick={() => { setOpenTugas(true) }}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Tanggal & Tugas</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
onClick={() => setOpenDrawer(true)}
>
<Text>Upload File</Text>
<IoIosArrowDropright size={25} />
</Group>
<Box onClick={() => { onToChooseAnggota() }}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Pilih Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
</Stack>
{
dataTask.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
{
dataTask.map((v, i) => {
return (
<Box key={i} onClick={() => {
setIndexDelTask(i)
setOpenDrawerTask(true)
}}>
<ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
</Box>
)
})
}
</Box>
}
{
listFile.length > 0 &&
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>File</Text>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 20
}}>
{
listFile.map((v, i) => {
return (
<Box key={i} onClick={() => {
setIndexDelFile(i)
setOpenDrawerFile(true)
}}>
<ResultsFile name={v.name} extension={v.extension} />
</Box>
)
})
}
</Box>
</Box>
}
{
member.length > 0 &&
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>
<Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
</Group>
<Box pt={10}>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
py={10}
>
{member.get().map((v: any, i: any) => {
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>
</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={() => setModal(true)}>
Simpan
</Button>
</Box>
</Box>
{/* Drawer pilih file */}
<LayoutDrawer
opened={openDrawer}
onClose={() => setOpenDrawer(false)}
title={"Pilih File"}
>
<Flex justify={"space-around"}>
<Dropzone
openRef={openRef}
onDrop={async (files) => {
if (!files || _.isEmpty(files))
return toast.error('Tidak ada file yang dipilih')
const fd = new FormData();
fd.append("file", files[0]);
setFileForm([...fileForm, fd])
setListFile([...listFile, { name: files[0].name, extension: files[0].type.split("/")[1] }])
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
onReject={(files) => {
return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}
>
<Box onClick={() => openRef.current?.()}>
<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>
</Dropzone>
<Box onClick={() => router.push("/project/create?page=file-save")}>
<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>
{/* Drawer hapus file */}
<LayoutDrawer
opened={openDrawerFile}
onClose={() => setOpenDrawerFile(false)}
title={""}
>
<Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</LayoutDrawer>
{/* Drawer hapus tugas */}
<LayoutDrawer
opened={openDrawerTask}
onClose={() => setOpenDrawerTask(false)}
title={""}
>
<Stack pt={10}>
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
<Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</LayoutDrawer>
<LayoutModal opened={isModal} onClose={() => setModal(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => {
if (val) {
onSubmit()
}
setModal(false)
}} />
</Box >
);
}

146
src/module/project/ui/create_users_project.tsx Normal file
View File

@@ -0,0 +1,146 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Center, Input, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { funGetAllmember, TypeUser } from '@/module/user';
import { funGetUserByCookies } from '@/module/auth';
import toast from 'react-hot-toast';
import { globalMemberProject } from '../lib/val_project';
export default function CreateUsersProject({ grup, onClose }: { grup?: string, onClose: (val: any) => void }) {
const router = useRouter()
const member = useHookstate(globalMemberProject)
const [selectedFiles, setSelectedFiles] = useState<any>([]);
const [dataMember, setDataMember] = useState<TypeUser>([])
const [loading, setLoading] = useState(true)
const [openTugas, setOpenTugas] = useState(false)
const handleFileClick = (index: number) => {
if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != dataMember[index].id))
} else {
setSelectedFiles([...selectedFiles, { idUser: dataMember[index].id, name: dataMember[index].name }])
}
};
async function loadData(search: string) {
setLoading(true)
const res = await funGetAllmember('?active=true&group=' + grup + '&search=' + search);
const user = await funGetUserByCookies();
if (res.success) {
setDataMember(res.data.filter((i: any) => i.id != user.id))
// cek data member sebelumnya
if (member.length > 0) {
setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
}
} else {
toast.error(res.message)
}
setLoading(false)
}
function onSubmit() {
if (selectedFiles.length == 0) {
return toast.error("Error! silahkan pilih anggota")
}
member.set(selectedFiles)
onClose(true)
}
useShallowEffect(() => {
loadData("")
}, []);
return (
<Box>
<LayoutNavbarNew 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"
onChange={(e) => loadData(e.target.value)}
/>
<Box pt={10}>
{loading ?
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{Array(6)
.fill(null)
.map((_, i) => (
<Box key={i}>
<Skeleton width={"100%"} height={100} radius={"md"} />
</Box>
))}
</SimpleGrid>
:
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
spacing={{ base: 20, sm: "xl" }}
verticalSpacing={{ base: "md", sm: "xl" }}
>
{dataMember.map((v, index) => {
const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
return (
<Box key={index} mb={10}>
<Box
bg={isSelected ? WARNA.bgHijauMuda : "white"}
style={{
border: `1px solid ${WARNA.biruTua}`,
borderRadius: 20,
}}
py={10}
onClick={() => handleFileClick(index)}
>
<Center>
<Avatar src={"https://i.pravatar.cc/1000?img=37"} 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={() => { onSubmit() }}
>
Simpan
</Button>
</Box>
</Box>
</Box>
);
}

2
src/module/project/ui/edit_detail_task_project.tsx
View File

@@ -25,7 +25,7 @@ export default function EditDetailTaskProject() {
try {
const res = await funEditDetailProject(param.id, {
name: name,
title: name,
dateStart: value[0],
dateEnd: value[1],

4
src/module/project/ui/list_project.tsx
View File

@@ -110,7 +110,7 @@ export default function ListProject() {
<HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
</ActionIcon>
</Center>
<Text>{v.name}</Text>
<Text>{v.title}</Text>
</Group>
<Box>
<RiCircleFill size={12} color={
@@ -136,7 +136,7 @@ export default function ListProject() {
<Card.Section>
<Box h={120} bg={WARNA.biruTua}>
<Flex justify={'center'} align={'center'} h={"100%"}>
<Title order={3} c={"white"}>{v.name}</Title>
<Title order={3} c={"white"}>{v.title}</Title>
</Flex>
</Box>
</Card.Section>

13
src/module/project/components/results_date-and_task.tsx → src/module/project/ui/results_date-and_task.tsx
View File

@@ -2,11 +2,12 @@ import { WARNA } from '@/module/_global';
import { Box, Group, SimpleGrid, Text } from '@mantine/core';
import React from 'react';
import { AiOutlineFileSync } from "react-icons/ai";
import { IFormDateProject } from '../lib/type_project';
import moment from 'moment';
export default function ResultsDateAndTask() {
export default function ResultsDateAndTask(data: IFormDateProject) {
return (
<Box pt={20}>
<Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
<Box pt={5}>
<Box bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
@@ -19,7 +20,7 @@ export default function ResultsDateAndTask() {
}}>
<Group>
<AiOutlineFileSync size={25} />
<Text>Proyek Laporan Permasyarakatan</Text>
<Text>{data.title}</Text>
</Group>
</Box>
<Box>
@@ -32,7 +33,7 @@ export default function ResultsDateAndTask() {
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>16 Juni 2024</Text>
<Text>{moment(data.dateStart).format('DD-MM-YYYY')}</Text>
</Group>
</Box>
<Box>
@@ -43,7 +44,7 @@ export default function ResultsDateAndTask() {
h={45}
style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
>
<Text>20 Juni 2024</Text>
<Text>{moment(data.dateEnd).format('DD-MM-YYYY')}</Text>
</Group>
</Box>
</SimpleGrid>

24
src/module/project/ui/results_file.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { WARNA } from '@/module/_global';
import { Box, Group, Text } from '@mantine/core';
import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { IListFileTaskProject } from '../lib/type_project';
export default function ResultsFile({ name, extension }: IListFileTaskProject) {
return (
<Box style={{
borderRadius: 10,
border: `1px solid ${"#D6D8F6"}`,
padding: 10
}} mb={10}>
<Group>
{extension == "pdf" && <BsFiletypePdf size={25} />}
{extension == "csv" && <BsFiletypeCsv size={25} />}
{extension == "png" && <BsFiletypePng size={25} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={25} />}
{extension == "heic" && <BsFiletypeHeic size={25} />}
<Text>{name}</Text>
</Group>
</Box>
);
}

9
src/module/project/view/view_create_project.tsx
View File

@@ -1,9 +0,0 @@
import React from 'react';
import CreateProject from '../components/create_project';
export default function ViewCreateProject({ searchParams }: { searchParams: any }) {
return (
<CreateProject searchParams={searchParams} />
);
}