Merge pull request #34 from bipproduction/lukman/9-juli-2024

Lukman/9 juli 2024

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 (
     <Box>
@@ -41,7 +86,7 @@ export default function ViewDateEndTask() {
             </Group>
           </Box>
           <Box>
-            <Text>Tanggal Berakhir</Text>
+            <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
             <Group
               justify="center"
               bg={"white"}
@@ -63,7 +108,7 @@ export default function ViewDateEndTask() {
             placeholder="Input Nama Tahapan"
             size="md"
           />
-          <Box >
+          <Box onClick={() => router.push('/project/create?page=create-users')}>
             <Group
               justify="space-between"
               p={10}
@@ -72,26 +117,70 @@ export default function ViewDateEndTask() {
                 borderRadius: 10,
               }}
             >
-              <Text>Tambah Anggota</Text>
+              <Text c={WARNA.biruTua}>Tambah Anggota</Text>
               <IoIosArrowDropright size={25} />
             </Group>
           </Box>
         </Stack>
         <Box pt={30}>
           <Group justify="space-between">
-            <Text>Anggota Terpilih</Text>
-            <Text>Total 10 Anggota</Text>
+            <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
+            <Text c={WARNA.biruTua}>Total 10 Anggota</Text>
           </Group>
-          <Box pt={20}>
+          <Box pt={10}>
             <Box mb={20}>
-              <Box style={{
-                border: `1px solid ${'#C7D6E8'}`
-              }} p={20}>
-                <Text>Divisi Kerohanian</Text>
+              <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('/project/create?anggota=yes')}
+          >
+            Simpan
+          </Button>
+        </Box>
       </Box>
     </Box>
   );

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 (
     <Box>
       <LayoutNavbarNew back="/project" title="tambah proyek" menu />
@@ -22,7 +26,7 @@ export default function CreateProject() {
             placeholder="Nama Proyek"
             size="md"
           />
-          <Box onClick={() => router.push('/project/create?page=task')}>
+          <Box onClick={() => router.push("/project/create?page=task")}>
             <Group
               justify="space-between"
               p={10}
@@ -42,12 +46,85 @@ export default function CreateProject() {
               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={() => router.push('/project/create')}>
+                Simpan
+              </Button>
+            </Box>
+          </>
+        }
+
+
       </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>
+    </Box >
   );
 }

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 (
-    <div>
-      CreateUsersProject
-    </div>
+    <Box>
+      <LayoutNavbarNew
+        back="/project/create?page=task"
+        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('/project/create?page=task')}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
   );
 }
-

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 (
+    <Box>
+      <LayoutNavbarNew back="/project" title="Detail Proyek" menu />
+      <Box p={20}>
+        <Text fz={20} c={WARNA.biruTua} fw={"bold"} ta={"center"}>Proyek Desa Maju</Text>
+        <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>
+        <Box mt={20}>
+          <Group
+            justify="space-between"
+            bg={'white'}
+            p={10}
+            style={{
+              border: `1px solid ${"#D6D8F6"}`,
+              borderRadius: 10,
+            }}
+            onClick={() => router.push('/project/update-detail')}
+          >
+            <Text>Update Kemajuan Tugas</Text>
+            <IoIosArrowDropright size={25} />
+          </Group>
+        </Box>
+        <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>
+        <ResultsFile />
+        <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>
+                {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>
+    </Box>
+  );
+}
+

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<Record<number, boolean>>({});
+
+  const handleFileClick = (index: number) => {
+    setSelectedFiles((prevSelectedFiles) => ({
+      ...prevSelectedFiles,
+      [index]: !prevSelectedFiles[index],
+    }));
+  };
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="/project/create" title="File Tersimpan" menu />
+      <Box p={20}>
+        <SimpleGrid
+          cols={{ base: 2, sm: 2, lg: 2 }}
+          spacing={{ base: 20, sm: "xl" }}
+          verticalSpacing={{ base: "md", sm: "xl" }}
+        >
+          {dataFile.map((file, index) => {
+            const isSelected = selectedFiles[index];
+            return (
+              <Box key={index} mb={20}>
+                <Box
+                  bg={"#DCEED8"}
+                  style={{
+                    border: `${isSelected ? "2px solid #FFC107" : "1px solid #D6D8F6"}`,
+                    borderRadius: 10,
+                  }}
+                  py={30}
+                  onClick={() => handleFileClick(index)}
+                >
+                  <Center>
+                    <BsFiletypeCsv size={80} />
+                  </Center>
+                </Box>
+                <Text mt={10} ta="center">
+                  {file.name}
+                </Text>
+              </Box>
+            );
+          })}
+        </SimpleGrid>
+        <Box mt="xl">
+          <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => router.push('/project/create?anggota=yes&files=yes&button=yes')}>
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

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<Record<number, boolean>>({});
+
+  const handleFileClick = (index: number) => {
+    setSelectedFiles((prevSelectedFiles) => ({
+      ...prevSelectedFiles,
+      [index]: !prevSelectedFiles[index],
+    }));
+  };
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="/project/create" title="File Tersimpan" menu />
+      <Box p={20}>
+        <SimpleGrid
+          cols={{ base: 2, sm: 2, lg: 2 }}
+          spacing={{ base: 20, sm: "xl" }}
+          verticalSpacing={{ base: "md", sm: "xl" }}
+        >
+          {dataFile.map((file, index) => {
+            const isSelected = selectedFiles[index];
+            return (
+              <Box key={index} mb={20}>
+                <Box
+                  bg={"#DCEED8"}
+                  style={{
+                    border: `${isSelected ? "2px solid #FFC107" : "1px solid #D6D8F6"}`,
+                    borderRadius: 10,
+                  }}
+                  py={30}
+                  onClick={() => handleFileClick(index)}
+                >
+                  <Center>
+                    <BsFiletypeCsv size={80} />
+                  </Center>
+                </Box>
+                <Text mt={10} ta="center">
+                  {file.name}
+                </Text>
+              </Box>
+            );
+          })}
+        </SimpleGrid>
+        <Box mt="xl">
+          <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => router.push('/project/update-detail')}>
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

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 (
+    <Box pt={20}>
+      <Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
+      <Box bg={"white"} style={{
+        borderRadius: 10,
+        border: `1px solid ${"#D6D8F6"}`,
+        padding: 20
+      }}>
+        <Box style={{
+          borderRadius: 10,
+          border: `1px solid ${"#D6D8F6"}`,
+          padding: 10
+        }}>
+          <Group>
+            <AiOutlineFileSync size={25} />
+            <Text>Proyek 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>
+      </Box>
+    </Box>
+  );
+}
+

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 (
+   <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>
+  );
+}

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

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 (
+    <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>
+        <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 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('/project/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("/project/update-detail?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>
+  );
+}

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}
+export { ViewDateEndTask }
+export { CreateUsersProject }
+export { ViewFileSave }
+export { ViewDetailProject }
+export { ViewUpdateProgres }

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 (
-    <CreateProject />
+    <CreateProject searchParams={searchParams} />
   );
 }
 

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 (
+    <DetailProject/>
+  );
+}
+

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 (
+    <FileSave/>
+  );
+}
+

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'
   },
 ]

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 (
+    <UpdateProgres />
+  );
+}
+