style : update components

Deskripsi:
- update create project
- update detail project
- update file upload
- update progres

No issue

src/module/project/components/create_project.tsx

@@ -69,7 +69,7 @@ export default function CreateProject({ searchParams }: { searchParams: any }) {
           (searchParams.button == 'yes') &&
           <>
             <Box mt="xl">
-              <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => router.push('/project/create')}>
+              <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => router.push('/project')}>
                 Simpan
               </Button>
             </Box>

src/module/project/components/detail_project/detail_create_user_project.tsx

@@ -0,0 +1,115 @@
+"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 DetailCreateUserProject() {
+  const router = useRouter();
+
+  return (
+    <Box>
+      <LayoutNavbarNew
+        back="/project/update-detail?page=detail-date-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/update-detail?page=detail-date-task")}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/module/project/components/detail_project/detail_date_end_task.tsx

@@ -0,0 +1,187 @@
+"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 DetailDateEndTask() {
+  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+  const router = useRouter()
+  return (
+    <Box>
+    <LayoutNavbarNew back="/project/update-detail" 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('/project/update-detail?page=detail-create-user')}>
+          <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('/project/update-detail?tugas=yes')}
+        >
+          Simpan
+        </Button>
+      </Box>
+    </Box>
+  </Box>
+  );
+}
+

src/module/project/components/detail_project/detail_file_save.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function DetailFileSave() {
+  return (
+    <div>
+      DetailFileSave
+    </div>
+  );
+}

src/module/project/components/detail_project/detail_project.tsx

@@ -1,13 +1,26 @@
-"use client"
+"use client";
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { ActionIcon, Avatar, Box, Center, Checkbox, Flex, Grid, Group, Progress, SimpleGrid, Text } from '@mantine/core';
+import {
-import React from 'react';
+  ActionIcon,
-import { HiMiniPresentationChartBar } from 'react-icons/hi2';
+  Avatar,
-import { IoIosArrowDropright } from 'react-icons/io';
+  Box,
-import ResultsDateAndTask from './results_date-and_task';
+  Center,
-import ResultsFile from './results_file';
+  Checkbox,
-import { AiOutlineFileSync } from 'react-icons/ai';
+  Flex,
-import { useRouter } from 'next/navigation';
+  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";
+import { LuClipboardEdit } from "react-icons/lu";
 
 const dataTugas = [
   {
@@ -43,73 +56,91 @@ const dataTugas = [
 ];
 
 export default function DetailProject() {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <Box>
-      <LayoutNavbarNew back="/project" title="Detail Proyek" menu />
+      <LayoutNavbarNew
+        back="/project"
+        title="Proyek Desa Maju"
+        menu={
+          <ActionIcon
+            variant="light"
+            bg={WARNA.bgIcon}
+            size="lg"
+            radius="lg"
+            aria-label="Settings"
+            onClick={() => router.push("/project/update-detail")}
+          >
+            <LuClipboardEdit size={20} color="white" />
+          </ActionIcon>
+        }
+      />
       <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={{
+          <Box
-            borderRadius: 10
+            p={20}
-          }}>
+            bg={"#DCEED8"}
-
+            style={{
-            <Grid gutter={'lg'}>
+              borderRadius: 10,
+            }}
+          >
+            <Grid gutter={"lg"}>
               <Grid.Col span={3}>
-                <ActionIcon variant="gradient"
+                <ActionIcon
+                  variant="gradient"
                   size={68}
                   aria-label="Gradient action icon"
                   radius={100}
-                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  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={{
+                  <Progress
-                    border: `1px solid ${'#BDBDBD'}`
+                    style={{
-                  }} w={'100%'} color="#FCAA4B" radius="md" size="xl" value={60} />
+                      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>
+          <Text fw={"bold"} c={WARNA.biruTua}>
-          <Box bg={"white"} style={{
+            Tanggal & Tugas
+          </Text>
+          <Box
+            bg={"white"}
+            style={{
               borderRadius: 10,
               border: `1px solid ${"#D6D8F6"}`,
-            padding: 20
+              padding: 20,
-          }}>
+            }}
+          >
             <Grid>
-              <Grid.Col span={'auto'}>
+              <Grid.Col span={"auto"}>
                 <Center>
                   <Checkbox color="teal" size="md" />
                 </Center>
               </Grid.Col>
               <Grid.Col span={10}>
-                <Box style={{
+                <Box
+                  style={{
                     borderRadius: 10,
                     border: `1px solid ${"#D6D8F6"}`,
-                  padding: 10
+                    padding: 10,
-                }}>
+                  }}
+                >
                   <Group>
                     <AiOutlineFileSync size={25} />
                     <Text>Laporan Permasyarakatan</Text>
@@ -123,7 +154,10 @@ export default function DetailProject() {
                         justify="center"
                         bg={"white"}
                         h={45}
-                        style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        style={{
+                          borderRadius: 10,
+                          border: `1px solid ${"#D6D8F6"}`,
+                        }}
                       >
                         <Text>16 Juni 2024</Text>
                       </Group>
@@ -134,7 +168,10 @@ export default function DetailProject() {
                         justify="center"
                         bg={"white"}
                         h={45}
-                        style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                        style={{
+                          borderRadius: 10,
+                          border: `1px solid ${"#D6D8F6"}`,
+                        }}
                       >
                         <Text>20 Juni 2024</Text>
                       </Group>
@@ -197,4 +234,3 @@ export default function DetailProject() {
     </Box>
   );
 }
-

src/module/project/components/detail_project/update_progres.tsx

@@ -0,0 +1,283 @@
+"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({ searchParams }: { searchParams: any }) {
+  const router = useRouter();
+  const [openDrawer, setOpenDrawer] = useState(false);
+  return (
+    <Box>
+      <LayoutNavbarNew back="/project/1" 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("/project/update-detail?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("/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/components/update_progres.tsx

@@ -1,165 +0,0 @@
-'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>
-  );
-}