From e5ad1cf49f1519fb72ce2bd083ae86718447069f Mon Sep 17 00:00:00 2001 From: lukman Date: Tue, 9 Jul 2024 16:57:25 +0800 Subject: [PATCH 1/3] style : update component project Deskripsi: - add detail project - add file save - add fule upload progres - add result date and task - add result file - add update progres No Issue --- .../components/create_date_end_task.tsx | 111 +++++++++- .../project/components/create_project.tsx | 93 +++++++- .../components/create_users_project.tsx | 114 +++++++++- .../project/components/detail_project.tsx | 200 ++++++++++++++++++ src/module/project/components/file_save.tsx | 88 ++++++++ .../components/file_upload_progres.tsx | 88 ++++++++ .../components/results_date-and_task.tsx | 55 +++++ .../project/components/results_file.tsx | 38 ++++ .../project/components/ui/navbar_project.tsx | 6 +- .../project/components/update_progres.tsx | 165 +++++++++++++++ 10 files changed, 932 insertions(+), 26 deletions(-) create mode 100644 src/module/project/components/detail_project.tsx create mode 100644 src/module/project/components/file_save.tsx create mode 100644 src/module/project/components/file_upload_progres.tsx create mode 100644 src/module/project/components/results_date-and_task.tsx create mode 100644 src/module/project/components/results_file.tsx create mode 100644 src/module/project/components/update_progres.tsx diff --git a/src/module/project/components/create_date_end_task.tsx b/src/module/project/components/create_date_end_task.tsx index 4d7cd44..f769f14 100644 --- a/src/module/project/components/create_date_end_task.tsx +++ b/src/module/project/components/create_date_end_task.tsx @@ -1,13 +1,58 @@ "use client"; import { LayoutNavbarNew, WARNA } from "@/module/_global"; -import { Box, Group, Input, SimpleGrid, Stack, Text } from "@mantine/core"; +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() { const [value, setValue] = useState<[Date | null, Date | null]>([null, null]); + const router = useRouter() return ( @@ -41,7 +86,7 @@ export default function ViewDateEndTask() { - Tanggal Berakhir + Tanggal Berakhir - + router.push('/project/create?page=create-users')}> - Tambah Anggota + Tambah Anggota - Anggota Terpilih - Total 10 Anggota + Anggota Terpilih + Total 10 Anggota - + - - Divisi Kerohanian + + + Divisi Kerohanian + + {dataTugas.map((v, i) => { + return ( + + + + + + {v.name} + + + {v.email} + + + + + Anggota + + + ); + })} + + + ); diff --git a/src/module/project/components/create_project.tsx b/src/module/project/components/create_project.tsx index d2dfe18..da5a72b 100644 --- a/src/module/project/components/create_project.tsx +++ b/src/module/project/components/create_project.tsx @@ -1,12 +1,16 @@ -'use client' -import { LayoutNavbarNew } from "@/module/_global"; -import { Box, Group, Input, Stack, Text } from "@mantine/core"; +"use client"; +import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global"; +import { Box, Button, Center, Flex, Group, Input, Stack, Text } from "@mantine/core"; import { useRouter } from "next/navigation"; -import React from "react"; +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"; -export default function CreateProject() { - const router = useRouter() +export default function CreateProject({ searchParams }: { searchParams: any }) { + const router = useRouter(); + const [openDrawer, setOpenDrawer] = useState(false); return ( @@ -22,7 +26,7 @@ export default function CreateProject() { placeholder="Nama Proyek" size="md" /> - router.push('/project/create?page=task')}> + router.push("/project/create?page=task")}> setOpenDrawer(true)} > Upload File + { + (searchParams.anggota == 'yes') && + <> + + + } + + {(searchParams.files == 'yes') && + <> + + + } + + { + (searchParams.button == 'yes') && + <> + + + + + } + + - + + + + setOpenDrawer(false)} + title={"Pilih File"} + > + + ""}> + +
+ +
+ + + Pilih file + + diperangkat + + router.push("/project/create?page=file-save")}> + +
+ +
+ + + Pilih file yang + + sudah ada + + + + ); } diff --git a/src/module/project/components/create_users_project.tsx b/src/module/project/components/create_users_project.tsx index fceff9b..028bc17 100644 --- a/src/module/project/components/create_users_project.tsx +++ b/src/module/project/components/create_users_project.tsx @@ -1,10 +1,114 @@ -import React from 'react'; +"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() { + const router = useRouter() return ( -
- CreateUsersProject -
+ + + + } + placeholder="Pencarian" + /> + + + Pilih Semua Divisi + + + + + + Divisi Kerohanian + + Pilih Semua + + + {DateUsers.map((v, i) => { + return ( + + + + + + {v.name} + + + + + + + ); + })} + + + + + + ); } - diff --git a/src/module/project/components/detail_project.tsx b/src/module/project/components/detail_project.tsx new file mode 100644 index 0000000..a11dcc3 --- /dev/null +++ b/src/module/project/components/detail_project.tsx @@ -0,0 +1,200 @@ +"use client" +import { LayoutNavbarNew, WARNA } from '@/module/_global'; +import { ActionIcon, Avatar, Box, Center, Checkbox, Flex, Grid, Group, Progress, SimpleGrid, Text } from '@mantine/core'; +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 { AiOutlineFileSync } from 'react-icons/ai'; +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 DetailProject() { + const router = useRouter() + return ( + + + + Proyek Desa Maju + + + + + + + + + + + + Kemajuan Proyek 60% + + 18 Juni 2024 + + + + + + + router.push('/project/update-detail')} + > + Update Kemajuan Tugas + + + + + Tanggal & Tugas + + + +
+ +
+ + + + + + Laporan Permasyarakatan + + + + + + Tanggal Mulai + + 16 Juni 2024 + + + + Tanggal Berakhir + + 20 Juni 2024 + + + + + + + + + + + + Anggota Terpilih + Total 10 Anggota + + + + + + Divisi Kerohanian + + {dataTugas.map((v, i) => { + return ( + + + + + + {v.name} + + + {v.email} + + + + + Anggota + + + ); + })} + + + + + + + ); +} + diff --git a/src/module/project/components/file_save.tsx b/src/module/project/components/file_save.tsx new file mode 100644 index 0000000..9ce0cf6 --- /dev/null +++ b/src/module/project/components/file_save.tsx @@ -0,0 +1,88 @@ +'use client' +import { LayoutNavbarNew, WARNA } from "@/module/_global"; +import { Box, Button, Center, SimpleGrid, Text } from "@mantine/core"; +import { useRouter } from "next/navigation"; +import React, { useState } from "react"; +import { BsFiletypeCsv } from "react-icons/bs"; + +const dataFile = [ + { + id: 1, + name: "Semua_Proyek.csv", + }, + { + id: 2, + name: "Proyek_Dinas.csv", + }, + { + id: 3, + name: "Proyek_Lpd.csv", + }, + { + id: 4, + name: "Proyek_Lembaga1.csv", + }, + { + id: 5, + name: "Proyek_Lembaga2.csv", + }, + { + id: 6, + name: "Proyek_Lembaga3.csv", + }, +]; + + +export default function FileSave() { + const router = useRouter() + const [selectedFiles, setSelectedFiles] = useState>({}); + + const handleFileClick = (index: number) => { + setSelectedFiles((prevSelectedFiles) => ({ + ...prevSelectedFiles, + [index]: !prevSelectedFiles[index], + })); + }; + + return ( + + + + + {dataFile.map((file, index) => { + const isSelected = selectedFiles[index]; + return ( + + handleFileClick(index)} + > +
+ +
+ + + {file.name} + + + ); + })} + + + + + + + ); +} diff --git a/src/module/project/components/file_upload_progres.tsx b/src/module/project/components/file_upload_progres.tsx new file mode 100644 index 0000000..b9f043b --- /dev/null +++ b/src/module/project/components/file_upload_progres.tsx @@ -0,0 +1,88 @@ +'use client' +import { LayoutNavbarNew, WARNA } from "@/module/_global"; +import { Box, Button, Center, SimpleGrid, Text } from "@mantine/core"; +import { useRouter } from "next/navigation"; +import React, { useState } from "react"; +import { BsFiletypeCsv } from "react-icons/bs"; + +const dataFile = [ + { + id: 1, + name: "Semua_Proyek.csv", + }, + { + id: 2, + name: "Proyek_Dinas.csv", + }, + { + id: 3, + name: "Proyek_Lpd.csv", + }, + { + id: 4, + name: "Proyek_Lembaga1.csv", + }, + { + id: 5, + name: "Proyek_Lembaga2.csv", + }, + { + id: 6, + name: "Proyek_Lembaga3.csv", + }, +]; + + +export default function FileUploadProgres() { + const router = useRouter() + const [selectedFiles, setSelectedFiles] = useState>({}); + + const handleFileClick = (index: number) => { + setSelectedFiles((prevSelectedFiles) => ({ + ...prevSelectedFiles, + [index]: !prevSelectedFiles[index], + })); + }; + + return ( + + + + + {dataFile.map((file, index) => { + const isSelected = selectedFiles[index]; + return ( + + handleFileClick(index)} + > +
+ +
+ + + {file.name} + + + ); + })} + + + + + + + ); +} diff --git a/src/module/project/components/results_date-and_task.tsx b/src/module/project/components/results_date-and_task.tsx new file mode 100644 index 0000000..619b2fc --- /dev/null +++ b/src/module/project/components/results_date-and_task.tsx @@ -0,0 +1,55 @@ +import { WARNA } from '@/module/_global'; +import { Box, Group, SimpleGrid, Text } from '@mantine/core'; +import React from 'react'; +import { AiOutlineFileSync } from "react-icons/ai"; + +export default function ResultsDateAndTask() { + return ( + + Tanggal & Tugas + + + + + Proyek Laporan Permasyarakatan + + + + + + Tanggal Mulai + + 16 Juni 2024 + + + + Tanggal Berakhir + + 20 Juni 2024 + + + + + + + ); +} + diff --git a/src/module/project/components/results_file.tsx b/src/module/project/components/results_file.tsx new file mode 100644 index 0000000..1a3c0d3 --- /dev/null +++ b/src/module/project/components/results_file.tsx @@ -0,0 +1,38 @@ +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 ( + + File + + + + + Proyek Laporan Permasyarakatan + + + + + + Proyek Laporan Permasyarakatan + + + + + ); +} \ No newline at end of file diff --git a/src/module/project/components/ui/navbar_project.tsx b/src/module/project/components/ui/navbar_project.tsx index 6982394..23c167a 100644 --- a/src/module/project/components/ui/navbar_project.tsx +++ b/src/module/project/components/ui/navbar_project.tsx @@ -7,6 +7,7 @@ import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiS import { MdAccountCircle } from 'react-icons/md'; import { RiCircleFill } from "react-icons/ri"; import DrawerProject from './drawer_project'; +import { useRouter } from 'next/navigation'; const dataProject = [ { @@ -56,6 +57,7 @@ const dataProject = [ export default function NavbarProject() { const [isList, setIsList] = useState(false) const [openDrawer, setOpenDrawer] = useState(false) + const router = useRouter() const handleList = () => { setIsList(!isList) @@ -123,7 +125,7 @@ export default function NavbarProject() { {dataProject.map((v, i) => { return ( - + router.push(`/project/${v.id}`)}>
{ return ( - + router.push(`/project/${v.id}`)}> diff --git a/src/module/project/components/update_progres.tsx b/src/module/project/components/update_progres.tsx new file mode 100644 index 0000000..bb9baa9 --- /dev/null +++ b/src/module/project/components/update_progres.tsx @@ -0,0 +1,165 @@ +'use client' +import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global'; +import { Box, Button, Center, Checkbox, Flex, Grid, Group, SimpleGrid, Text } from '@mantine/core'; +import { useRouter } from 'next/navigation'; +import React, { useState } from 'react'; +import { AiOutlineFileSync } from 'react-icons/ai'; +import { BsFiletypeCsv } from 'react-icons/bs'; +import { IoIosArrowDropright } from 'react-icons/io'; + +export default function UpdateProgres() { + const router = useRouter() + const [openDrawer, setOpenDrawer] = useState(false); + return ( + + + + + setOpenDrawer(true)} + > + Upload File + + + + Tanggal & Tugas + + + +
+ +
+ + + + + + Laporan Permasyarakatan + + + + + + Tanggal Mulai + + 16 Juni 2024 + + + + Tanggal Berakhir + + 20 Juni 2024 + + + + + + + + + File + + + + + Proyek Laporan Permasyarakatan + + + + + + Proyek Laporan Permasyarakatan + + + + + + + + + setOpenDrawer(false)} + title={"Pilih File"} + > + + ""}> + +
+ +
+ + + Pilih file + + diperangkat + + router.push("/project/update-detail?page=upload-progres")}> + +
+ +
+ + + Pilih file yang + + sudah ada + + + + + ); +} From 0c8bd50d34100721b0b29e4be8607ccc46ad1156 Mon Sep 17 00:00:00 2001 From: lukman Date: Tue, 9 Jul 2024 16:58:36 +0800 Subject: [PATCH 2/3] style : update view project Deskripsi: - add view detail project - add view update progres No issue --- src/module/project/view/view_create_project.tsx | 4 ++-- src/module/project/view/view_detail_project.tsx | 9 +++++++++ src/module/project/view/view_file_save.tsx | 9 +++++++++ src/module/project/view/view_filter_project.tsx | 10 +++++----- src/module/project/view/view_update_progres.tsx | 9 +++++++++ 5 files changed, 34 insertions(+), 7 deletions(-) create mode 100644 src/module/project/view/view_detail_project.tsx create mode 100644 src/module/project/view/view_file_save.tsx create mode 100644 src/module/project/view/view_update_progres.tsx diff --git a/src/module/project/view/view_create_project.tsx b/src/module/project/view/view_create_project.tsx index cf7116d..380c5b8 100644 --- a/src/module/project/view/view_create_project.tsx +++ b/src/module/project/view/view_create_project.tsx @@ -1,9 +1,9 @@ import React from 'react'; import CreateProject from '../components/create_project'; -export default function ViewCreateProject() { +export default function ViewCreateProject({ searchParams }: { searchParams: any }) { return ( - + ); } diff --git a/src/module/project/view/view_detail_project.tsx b/src/module/project/view/view_detail_project.tsx new file mode 100644 index 0000000..9c2c478 --- /dev/null +++ b/src/module/project/view/view_detail_project.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import DetailProject from '../components/detail_project'; + +export default function ViewDetailProject() { + return ( + + ); +} + diff --git a/src/module/project/view/view_file_save.tsx b/src/module/project/view/view_file_save.tsx new file mode 100644 index 0000000..6949a64 --- /dev/null +++ b/src/module/project/view/view_file_save.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import FileSave from '../components/file_save'; + +export default function ViewFileSave() { + return ( + + ); +} + diff --git a/src/module/project/view/view_filter_project.tsx b/src/module/project/view/view_filter_project.tsx index 05e3384..a233acb 100644 --- a/src/module/project/view/view_filter_project.tsx +++ b/src/module/project/view/view_filter_project.tsx @@ -10,23 +10,23 @@ const dataFilter = [ name: 'Semua Proyek' }, { - id: 1, + id: 2, name: 'Proyek Dinas' }, { - id: 1, + id: 3, name: 'Proyek Lpd' }, { - id: 1, + id: 4, name: 'Proyek Lembaga 1' }, { - id: 1, + id: 5, name: 'Proyek Lembaga 2' }, { - id: 1, + id: 6, name: 'Proyek Lembaga 3' }, ] diff --git a/src/module/project/view/view_update_progres.tsx b/src/module/project/view/view_update_progres.tsx new file mode 100644 index 0000000..016d3f5 --- /dev/null +++ b/src/module/project/view/view_update_progres.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import UpdateProgres from '../components/update_progres'; + +export default function ViewUpdateProgres() { + return ( + + ); +} + From 1ddf880494dca8189e81fa22e26a2d52e6798887 Mon Sep 17 00:00:00 2001 From: lukman Date: Tue, 9 Jul 2024 16:59:49 +0800 Subject: [PATCH 3/3] style : update module project --- src/app/(application)/project/[id]/page.tsx | 10 ++++++++++ src/app/(application)/project/create/page.tsx | 8 ++++++-- .../(application)/project/update-detail/page.tsx | 13 +++++++++++++ src/module/project/index.ts | 10 +++++++++- 4 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 src/app/(application)/project/[id]/page.tsx create mode 100644 src/app/(application)/project/update-detail/page.tsx diff --git a/src/app/(application)/project/[id]/page.tsx b/src/app/(application)/project/[id]/page.tsx new file mode 100644 index 0000000..7ec8b5b --- /dev/null +++ b/src/app/(application)/project/[id]/page.tsx @@ -0,0 +1,10 @@ +import { ViewDetailProject } from '@/module/project'; +import React from 'react'; + +function Page() { + return ( + + ); +} + +export default Page; diff --git a/src/app/(application)/project/create/page.tsx b/src/app/(application)/project/create/page.tsx index 83e4559..488ef99 100644 --- a/src/app/(application)/project/create/page.tsx +++ b/src/app/(application)/project/create/page.tsx @@ -1,11 +1,15 @@ -import { ViewCreateProject, ViewDateEndTask } from "@/module/project"; +import { CreateUsersProject, ViewCreateProject, ViewDateEndTask, ViewFileSave } from "@/module/project"; import React from "react"; function Page({ searchParams }: { searchParams: any }) { if (searchParams.page == "task") return ; + if (searchParams.page == "create-users") + return + if (searchParams.page == "file-save") + return - return ; + return ; } export default Page; diff --git a/src/app/(application)/project/update-detail/page.tsx b/src/app/(application)/project/update-detail/page.tsx new file mode 100644 index 0000000..9301a6c --- /dev/null +++ b/src/app/(application)/project/update-detail/page.tsx @@ -0,0 +1,13 @@ +import { ViewUpdateProgres } from '@/module/project'; +import FileUploadProgres from '@/module/project/components/file_upload_progres'; +import React from 'react'; + +function Page({ searchParams }: { searchParams: any }) { + if (searchParams.page == "upload-progres") + return + + + return +} + +export default Page; diff --git a/src/module/project/index.ts b/src/module/project/index.ts index c1f16c6..9b66f52 100644 --- a/src/module/project/index.ts +++ b/src/module/project/index.ts @@ -2,8 +2,16 @@ import ViewCreateProject from "./view/view_create_project"; import ViewDateEndTask from "./components/create_date_end_task"; import ViewFilterProject from "./view/view_filter_project"; import ViewProject from "./view/view_project"; +import CreateUsersProject from "./components/create_users_project"; +import ViewFileSave from "./view/view_file_save"; +import ViewDetailProject from "./view/view_detail_project"; +import ViewUpdateProgres from "./view/view_update_progres"; export { ViewProject } export { ViewCreateProject } export { ViewFilterProject } -export {ViewDateEndTask} \ No newline at end of file +export { ViewDateEndTask } +export { CreateUsersProject } +export { ViewFileSave } +export { ViewDetailProject } +export { ViewUpdateProgres } \ No newline at end of file