Merge pull request #145 from bipproduction/amalia/23-agustus-24

Amalia/23 agustus 24

prisma/schema.prisma

@@ -166,7 +166,7 @@ model Project {
   idVillage      String
   Group          Group            @relation(fields: [idGroup], references: [id])
   idGroup        String
-  name           String
+  title          String
   status         Int              @default(0) // 0 = pending, 1 = ongoing, 2 = done, 3 = cancelled
   desc           String?          @db.Text
   reason         String?          @db.Text
@@ -208,9 +208,9 @@ model ProjectTask {
   id        String   @id @default(cuid())
   Project   Project  @relation(fields: [idProject], references: [id])
   idProject String
-  name      String
+  title     String
   desc      String?
-  status    Int      @default(0) // 0 = pending, 1 = ongoing
+  status    Int      @default(0) // 0 = todo, 1 = done
   dateStart DateTime @db.Date
   dateEnd   DateTime @db.Date
   isActive  Boolean  @default(true)

src/app/(application)/division/[id]/(fitur-division)/calender/update/[detail]/page.tsx

@@ -2,10 +2,6 @@ import { UpdateDivisionCalender } from '@/module/calender';
 import React from 'react';
 
 function Page({ searchParams }: { searchParams: any }) {
-  // if (searchParams.page == "update-ulangi-event")
-  //   return <UpdateUlangiEvent />
-  // if (searchParams.page == "update-user-calender")
-  //   return <UpdateUserDivisionCalender />
   return (
     <UpdateDivisionCalender/>
   );

src/app/(application)/project/create/page.tsx

@@ -1,15 +1,12 @@
-import { CreateUsersProject, ViewCreateProject, ViewDateEndTask, ViewFileSave } from "@/module/project";
+import { CreateProject, ViewFileSave } from "@/module/project";
 import React from "react";
 
 function Page({ searchParams }: { searchParams: any }) {
-  if (searchParams.page == "task")
+
-    return <ViewDateEndTask kategori="project" />;
-  if (searchParams.page == "create-users")
-    return <CreateUsersProject kategori="project" />
   if (searchParams.page == "file-save")
     return <ViewFileSave kategori="project" />
 
-  return <ViewCreateProject searchParams={searchParams} />;
+  return <CreateProject />;
 }
 
 export default Page;

src/app/(application)/project/update/[id]/page.tsx

@@ -1,21 +1,8 @@
-import {
+import { EditDetailTaskProject } from "@/module/project";
-  DetailCreateUserProject,
-  DetailDateEndTask,
-  EditDetailTaskProject,
-  FileUploadProgres,
-  ViewUpdateProgres,
-} from "@/module/project";
 
 import React from "react";
 
-function Page({ searchParams }: { searchParams: any }) {
+function Page() {
-  // if (searchParams.page == "upload-progres") return <FileUploadProgres kategori="project" />;
-  // if (searchParams.page == "detail-create-user")
-  //   return <DetailCreateUserProject kategori="project" />;
-  // if (searchParams.page == "detail-date-task") return <DetailDateEndTask kategori="project" />;
-
-  // return <ViewUpdateProgres searchParams={searchParams} />;
-
   return (
     <EditDetailTaskProject/>
   )

src/app/api/project/[id]/route.ts

@@ -59,7 +59,7 @@ export async function GET(request: Request, context: { params: { id: string } })
                 },
                 select: {
                     id: true,
-                    name: true,
+                    title: true,
                     desc: true,
                     status: true,
                     dateStart: true,
@@ -159,7 +159,7 @@ export async function POST(request: Request, context: { params: { id: string } }
 
         const dataCreate = await prisma.projectTask.create({
             data: {
-                name,
+                title: name,
                 idProject: id,
                 dateStart: new Date(moment(dateStart).format('YYYY-MM-DD')),
                 dateEnd: new Date(moment(dateEnd).format('YYYY-MM-DD')),
@@ -249,7 +249,7 @@ export async function PUT(request: Request, context: { params: { id: string } })
                 id
             },
             data: {
-                name
+                title: name
             }
         })
 

src/app/api/project/detail/[id]/route.ts

@@ -12,6 +12,8 @@ export async function DELETE(request: Request, context: { params: { id: string }
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
         }
         const { id } = context.params;
+        const { idProject } = (await request.json());
+
         const data = await prisma.projectTask.count({
             where: {
                 id: id,
@@ -37,6 +39,35 @@ export async function DELETE(request: Request, context: { params: { id: string }
             },
         });
 
+        const dataTask = await prisma.projectTask.findMany({
+            where: {
+                isActive: true,
+                idProject: idProject,
+            }
+        })
+
+        const semua = dataTask.length
+        const selesai = dataTask.filter((item) => item.status == 1).length
+        const prosess = Math.ceil((selesai / semua) * 100)
+        let statusProject = 1
+
+        if (prosess == 100) {
+            statusProject = 2
+        } else if (prosess == 0) {
+            statusProject = 0
+        }
+
+
+        const updProject = await prisma.project.update({
+            where: {
+                id: idProject
+            },
+            data: {
+                status: statusProject
+            }
+        })
+
+
         return NextResponse.json(
             {
                 success: true,
@@ -87,6 +118,8 @@ export async function PUT(request: Request, context: { params: { id: string } })
             }
         })
 
+
+        // const cek progress 
         const dataTask = await prisma.projectTask.findMany({
             where: {
                 isActive: true,
@@ -174,7 +207,7 @@ export async function POST(request: Request, context: { params: { id: string } }
                 id
             },
             data: {
-                name: name,
+                title: name,
                 dateStart: new Date(moment(dateStart).format('YYYY-MM-DD')),
                 dateEnd: new Date(moment(dateEnd).format('YYYY-MM-DD')),
             }

src/app/api/project/route.ts

@@ -29,7 +29,7 @@ export async function GET(request: Request) {
                 idVillage: String(villageId),
                 idGroup: String(groupId),
                 createdBy: String(userId),
-                name: {
+                title: {
                     contains: (name == undefined || name == "null") ? "" : name,
                     mode: "insensitive"
                 },
@@ -37,7 +37,7 @@ export async function GET(request: Request) {
             },
             select: {
                 id: true,
-                name: true,
+                title: true,
                 desc: true,
                 status: true,
                 ProjectMember: {
@@ -73,16 +73,15 @@ export async function POST(request: Request) {
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
         }
 
-        const { idVillage, idGroup, name, task, member, file } = (await request.json())
+        const { idGroup, title, task, member, file } = (await request.json())
         const userId = user.id
-        
+
 
         const data = await prisma.project.create({
             data: {
-                idVillage: String(idVillage),
+                idVillage: String(user.idVillage),
                 idGroup: String(idGroup),
-                name: name,
+                title,
-                desc: "",
                 createdBy: String(userId)
             },
             select: {
@@ -94,7 +93,7 @@ export async function POST(request: Request) {
             const dataProject = task.map((v: any) => ({
                 ..._.omit(v, ["dateStart", "dateEnd", "name"]),
                 idProject: data.id,
-                name: v.name,
+                title: v.title,
                 dateStart: new Date(moment(v.dateStart).format('YYYY-MM-DD')),
                 dateEnd: new Date(moment(v.dateEnd).format('YYYY-MM-DD')),
             }))
@@ -109,7 +108,6 @@ export async function POST(request: Request) {
                 ..._.omit(v, ["idUser", "name"]),
                 idProject: data.id,
                 idUser: v.idUser,
-                name: v.name
             }))
 
             const insertMember = await prisma.projectMember.createMany({
@@ -121,31 +119,31 @@ export async function POST(request: Request) {
 
         if (file.length > 0) {
             file.map((v: any, index: any) => {
-               const f: any = file[index].get('file')
+                const f: any = file[index].get('file')
-               const fName = f.name
+                const fName = f.name
-               const fExt = fName.split(".").pop()
+                const fExt = fName.split(".").pop()
-               // funUploadFile(fName, f)
+                // funUploadFile(fName, f)
-   
+
-               const dataFile = {
+                const dataFile = {
-                  name: fName,
+                    name: fName,
-                   extension: fExt,
+                    extension: fExt,
-                  idProject: data.id,
+                    idProject: data.id,
-               }
+                }
-   
+
-               fileFix.push(dataFile)
+                fileFix.push(dataFile)
             })
-   
+
             const insertFile = await prisma.divisionProjectFile.createMany({
-               data: fileFix
+                data: fileFix
             })
-   
+
-         }
+        }
 
 
-        return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: data, }, { status: 200 });
+        return NextResponse.json({ success: true, message: "Berhasil membuat proyek", data: data, }, { status: 200 });
 
     } catch (error) {
         console.error(error);
-        return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+        return NextResponse.json({ success: false, message: "Gagal membuat proyek, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
     }
 }

src/app/api/task/detail/[id]/route.ts

@@ -13,6 +13,7 @@ export async function DELETE(request: Request, context: { params: { id: string }
          return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
       }
       const { id } = context.params;
+      const { idProject } = (await request.json());
       const data = await prisma.divisionProjectTask.count({
          where: {
             id: id,
@@ -38,6 +39,34 @@ export async function DELETE(request: Request, context: { params: { id: string }
          },
       });
 
+      // const cek progress 
+      const dataTask = await prisma.divisionProjectTask.findMany({
+         where: {
+            isActive: true,
+            idProject: idProject
+         }
+      })
+
+      const semua = dataTask.length
+      const selesai = _.filter(dataTask, { status: 1 }).length
+      const progress = Math.ceil((selesai / semua) * 100)
+      let statusProject = 1
+
+      if (progress == 100) {
+         statusProject = 2
+      } else if (progress == 0) {
+         statusProject = 0
+      }
+
+      const updProject = await prisma.divisionProject.update({
+         where: {
+            id: idProject
+         },
+         data: {
+            status: statusProject
+         }
+      })
+
       return NextResponse.json(
          {
             success: true,

src/module/division_new/_division_fitur/calender/components/update_calander/update_division_calender.tsx

@@ -1,139 +0,0 @@
-"use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Box, Button, Group, Input, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
-import { DateInput, TimeInput } from '@mantine/dates';
-import React, { useState } from 'react';
-import { IoIosArrowDropright } from 'react-icons/io';
-import { useRouter } from 'next/navigation';
-import LayoutModal from '@/module/_global/layout/layout_modal';
-import toast from 'react-hot-toast';
-
-export default function UpdateDivisionCalender() {
-  const [isModal, setModal] = useState(false)
-
-  function onTrue(val: boolean) {
-    if (val) {
-      toast.success("Sukses! Data tersimpan");
-    }
-    setModal(false)
-  }
-  const [value, setValue] = useState<Date | null>(null);
-  const router = useRouter()
-  return (
-    <Box>
-      <LayoutNavbarNew back="/calender" title="Edit kalender" menu />
-      <Box p={20}>
-        <Stack>
-          <TextInput
-            styles={{
-              input: {
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              },
-            }}
-            size="md"
-            placeholder="Event Nama"
-            label="Event Nama"
-          />
-          <DateInput
-            styles={{
-              input: {
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              },
-            }}
-            size="md"
-            value={value}
-            onChange={setValue}
-            placeholder="Input Tanggal"
-            label="Tanggal"
-          />
-          <SimpleGrid
-            cols={{ base: 2, sm: 2, lg: 2 }}
-          >
-            <TimeInput
-              styles={{
-                input: {
-                  border: `1px solid ${"#D6D8F6"}`,
-                  borderRadius: 10,
-                },
-              }}
-              size="md"
-              label="Waktu Awal"
-            />
-            <TimeInput
-              styles={{
-                input: {
-                  border: `1px solid ${"#D6D8F6"}`,
-                  borderRadius: 10,
-                },
-              }}
-              size="md"
-              label="Waktu Akhir"
-            />
-          </SimpleGrid>
-          <TextInput
-            styles={{
-              input: {
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              },
-            }}
-            size="md"
-            placeholder="Link Meet"
-            label="Link Meet"
-          />
-          <Box mt={5} onClick={() => router.push('/calender/update?page=update-ulangi-event')}>
-            <Group
-              justify="space-between"
-              p={10}
-              style={{
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              }}
-            >
-              <Text>Ulangi Event</Text>
-              <IoIosArrowDropright size={25} />
-            </Group>
-          </Box>
-          <Box mt={5} onClick={() => router.push('/calender/update?page=update-user-calender')}>
-            <Group
-              justify="space-between"
-              p={10}
-              style={{
-                border: `1px solid ${"#D6D8F6"}`,
-                borderRadius: 10,
-              }}
-            >
-              <Text>Tambah Anggota</Text>
-              <IoIosArrowDropright size={25} />
-            </Group>
-          </Box>
-          <Textarea styles={{
-            input: {
-              border: `1px solid ${"#D6D8F6"}`,
-              borderRadius: 10,
-            },
-          }}
-            size="md" placeholder='Deskripsi' label="Deskripsi" />
-          <Box mt={"xl"}>
-            <Button
-              c={"white"}
-              bg={WARNA.biruTua}
-              size="lg"
-              radius={30}
-              fullWidth
-              onClick={() => setModal(true)}
-            >
-              Simpan
-            </Button>
-          </Box>
-        </Stack>
-      </Box>
-      <LayoutModal opened={isModal} onClose={() => setModal(false)}
-        description="Apakah Anda yakin ingin menambahkan data?"
-        onYes={(val) => { onTrue(val) }} />
-    </Box>
-  );
-}
-

src/module/division_new/_division_fitur/calender/components/update_calander/update_ulangi_event.tsx

@@ -1,15 +0,0 @@
-import { LayoutNavbarNew } from '@/module/_global';
-import { Box } from '@mantine/core';
-import React from 'react';
-import ListUlangiEvent from '../list_ulangi_event';
-
-export default function UpdateUlangiEvent() {
-  return (
-    <Box>
-      <LayoutNavbarNew back='/calender/update' title='ulangi event' menu />
-      <Box p={20}>
-        <ListUlangiEvent />
-      </Box>
-    </Box>
-  );
-}

src/module/division_new/_division_fitur/calender/view/view_update_division_calender.tsx

@@ -1,11 +0,0 @@
-import { Box } from '@mantine/core';
-import React from 'react';
-import UpdateDivisionCalender from '../components/update_calander/update_division_calender';
-
-export default function ViewUpdateDivisionCalender() {
-  return (
-    <Box>
-      <UpdateDivisionCalender/>
-    </Box>
-  );
-}

src/module/division_new/index.ts

@@ -1,12 +1,9 @@
 import { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision } from './lib/type_division';
 import CreateUserDivisionCalender from "./_division_fitur/calender/components/create_user_division_calender";
-import UlangiEvent from "./_division_fitur/calender/components/ulangi_event";
-import UpdateUlangiEvent from "./_division_fitur/calender/components/update_calander/update_ulangi_event";
 import ViewCreateDivisionCalender from "./_division_fitur/calender/view/view_create_division_calender";
 import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail_event_division";
 import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
 import ViewHistoryDivisionCalender from "./_division_fitur/calender/view/view_history_division_calender";
-import ViewUpdateDivisionCalender from "./_division_fitur/calender/view/view_update_division_calender";
 import CreateAdminDivision from "./ui/create_admin_division";
 import CreateUsers from "./ui/create_users";
 import ListDivision from './ui/list_division';
@@ -23,17 +20,15 @@ import EditDivision from './ui/edit_division';
 import CreateReport from './ui/create_report';
 import ReportDivisionId from './ui/report_division_id';
 import { funGetDivisionById, funGetListDivisionByIdDivision } from './lib/api_division';
+import UlangiEvent from './_division_fitur/calender/components/ulangi_event';
 
 export { CreateUsers };
 export { CreateAdminDivision };
 export { ViewDivisionCalender };
 export { ViewCreateDivisionCalender };
-export { UlangiEvent };
 export { CreateUserDivisionCalender };
 export { ViewHistoryDivisionCalender };
 export { ViewDetailEventDivision };
-export { ViewUpdateDivisionCalender };
-export { UpdateUlangiEvent };
 export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }
 export { ListDivision }
 export { CreateDivision }
@@ -50,3 +45,4 @@ export { CreateReport }
 export { ReportDivisionId }
 export { funGetDivisionById }
 export { funGetListDivisionByIdDivision }
+export { UlangiEvent }

src/module/document/ui/navbar_document_division.tsx

@@ -23,7 +23,7 @@ import { globalRefreshDocument } from '../lib/val_document';
 import { RiListCheck } from 'react-icons/ri';
 import { GoChevronRight } from 'react-icons/go';
 import DrawerShareDocument from './drawer_share_document';
-import { FaSlideshare } from 'react-icons/fa6';
+import { FaShare } from 'react-icons/fa6';
 
 export default function NavbarDocumentDivision() {
   const router = useRouter()
@@ -309,7 +309,7 @@ export default function NavbarDocumentDivision() {
                         <Box>
                           {
                             (v.share) ?
-                              <Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaSlideshare />} size={25}>
+                              <Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}>
                                 {
                                   (v.category == "FOLDER") ?
                                     <FcFolder size={60} /> :

src/module/project/components/create_date_end_task.tsx

@@ -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>
-  );
-}

src/module/project/components/create_project.tsx

@@ -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 >
-  );
-}

src/module/project/components/create_users_project.tsx

@@ -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>
-  );
-}

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

@@ -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 ResultsDateAndTask from "../../ui/results_date-and_task";
-import ResultsFile from "../results_file";
+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>

src/module/project/components/results_file.tsx

@@ -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>
-  );
-}

src/module/project/index.ts

@@ -1,7 +1,6 @@
-import ViewCreateProject from "./view/view_create_project";
+import ViewDateEndTask from "./ui/create_date_end_task";
-import ViewDateEndTask from "./components/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 }

src/module/project/lib/api_project.ts

@@ -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: {
@@ -28,12 +31,13 @@ export const funGetAllMemberById = async (path?: string) => {
 }
 
 
-export const funDeleteDetailProject = async (path: string) => {
+export const funDeleteDetailProject = async (path: string, data: { idProject: string }) => {
     const response = await fetch(`/api/project/detail/${path}`, {
         method: "DELETE",
         headers: {
             "Content-Type": "application/json",
         },
+        body: JSON.stringify(data),
     });
     return await response.json().catch(() => null);
 }

src/module/project/lib/type_project.ts

@@ -1,6 +1,6 @@
 export interface IDataProject {
   id: string
-  name: string
+  title: string
   desc: string
   status: number
   member: number
@@ -8,7 +8,7 @@ export interface IDataProject {
 
 export interface IDataListTaskProject {
   id: string
-  name: string
+  title: string
   desc: string
   status: number
   dateStart: string
@@ -29,8 +29,8 @@ export interface IDataMemberProject {
 }
 
 export interface IFormProject {
-  idDivision: string,
+  title: string,
-  name: 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
 }

src/module/project/lib/val_project.ts

@@ -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 = [
     {

src/module/project/ui/add_member_detail_project.tsx

@@ -4,7 +4,6 @@ import React, { useState } from 'react';
 import { IDataMemberProject, IDataMemberProjectDetail } from '../lib/type_project';
 import toast from 'react-hot-toast';
 import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
-import { funGetDivisionById } from '@/module/division_new';
 import { useShallowEffect } from '@mantine/hooks';
 import { Avatar, Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
@@ -103,11 +102,9 @@ export default function AddMemberDetailProject() {
     <Box>
       <LayoutNavbarNew
         back=""
-        title="Pilih Anggotak"
+        title="Pilih Anggota"
         menu
       />
-      <pre>{JSON.stringify(isData, null, 1)}</pre>
-      <pre>{JSON.stringify(isDataMember, null, 1)}</pre>
       <Box p={20}>
         {/* <TextInput
      styles={{

src/module/project/ui/create_date_end_task.tsx

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

src/module/project/ui/create_project.tsx

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

src/module/project/ui/create_users_project.tsx

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

src/module/project/ui/edit_detail_task_project.tsx

@@ -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],
 
@@ -46,7 +46,7 @@ export default function EditDetailTaskProject() {
     try {
       const res = await funGetDetailProject(param.id);
       if (res.success) {
-        setName(res.data.name)
+        setName(res.data.title)
         setValue([
           new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
           new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),

src/module/project/ui/edit_task_project.tsx

@@ -40,7 +40,7 @@ export default function EditTaskProject() {
     try {
       const res = await funGetOneProjectById(param.id, 'data');
       if (res.success) {
-        setName(res.data.name);
+        setName(res.data.title);
       } else {
         toast.error(res.message);
       }
@@ -57,7 +57,7 @@ export default function EditTaskProject() {
 
   return (
     <Box>
-      <LayoutNavbarNew back="" title={"Edit Judul Tugas"} menu />
+      <LayoutNavbarNew back="" title={"Edit Judul Proyek"} menu />
       <Box p={20}>
         <Stack pt={15}>
           <Input

src/module/project/ui/list_project.tsx

@@ -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>

src/module/project/ui/list_tugas_detail_project.tsx

@@ -49,12 +49,13 @@ export default function ListTugasDetailProject() {
 
   async function onDelete() {
     try {
-      const res = await funDeleteDetailProject(idData);
+      const res = await funDeleteDetailProject(idData, { idProject: param.id });
       if (res.success) {
         toast.success(res.message);
         getOneData();
         setIdData("")
         setOpenDrawer(false)
+        refresh.set(true)
       } else {
         toast.error(res.message);
       }
@@ -125,7 +126,7 @@ export default function ListTugasDetailProject() {
                           >
                             <Group>
                               <AiOutlineFileSync size={25} />
-                              <Text>{item.name}</Text>
+                              <Text>{item.title}</Text>
                             </Group>
                           </Box>
                           <Box>
@@ -206,51 +207,51 @@ export default function ListTugasDetailProject() {
         </LayoutDrawer>
 
         <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
-            description="Apakah Anda yakin ingin menghapus proyek ini?"
+          description="Apakah Anda yakin ingin menghapus proyek ini?"
-            onYes={(val) => {
+          onYes={(val) => {
-               if (val) {
+            if (val) {
-                  onDelete()
+              onDelete()
-               }
+            }
-               setOpenModal(false)
+            setOpenModal(false)
           }} />
-        
-        <LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
-            <Box>
-               <Stack pt={10}>
-                  {
-                     valStatusDetailProject.map((item, index) => {
-                        return (
-                           <Box mb={5} key={index} onClick={() => { onUpdateStatus(item.value) }}>
-                              <Flex justify={"space-between"} align={"center"}>
-                                 <Group>
-                                    <Text style={{
-                                       cursor: 'pointer',
-                                       display: 'flex',
-                                       alignItems: 'center',
-                                    }}>
-                                       {item.name}
-                                    </Text>
-                                 </Group>
-                                 <Text
-                                    style={{
-                                       cursor: 'pointer',
-                                       display: 'flex',
-                                       alignItems: 'center',
-                                       paddingLeft: 20,
-                                    }}
-                                 >
-                                    {statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-                                 </Text>
-                              </Flex>
-                              <Divider my={"md"} />
-                           </Box>
-                        )
-                     })
-                  }
 
-               </Stack>
+        <LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
-            </Box>
+          <Box>
-         </LayoutDrawer>
+            <Stack pt={10}>
+              {
+                valStatusDetailProject.map((item, index) => {
+                  return (
+                    <Box mb={5} key={index} onClick={() => { onUpdateStatus(item.value) }}>
+                      <Flex justify={"space-between"} align={"center"}>
+                        <Group>
+                          <Text style={{
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                          }}>
+                            {item.name}
+                          </Text>
+                        </Group>
+                        <Text
+                          style={{
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            paddingLeft: 20,
+                          }}
+                        >
+                          {statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                        </Text>
+                      </Flex>
+                      <Divider my={"md"} />
+                    </Box>
+                  )
+                })
+              }
+
+            </Stack>
+          </Box>
+        </LayoutDrawer>
 
       </Box>
     </>

src/module/project/ui/navbar_detail_project.tsx

@@ -21,7 +21,7 @@ export default function NavbarDetailProject() {
     try {
       const res = await funGetOneProjectById(param.id, 'data');
       if (res.success) {
-        setName(res.data.name);
+        setName(res.data.title);
       } else {
         toast.error(res.message);
       }

src/module/project/ui/progress_detail_project.tsx

@@ -3,7 +3,7 @@ import { WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Grid, Progress, Text } from '@mantine/core';
 import { useParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { HiMiniPresentationChartBar } from 'react-icons/hi2';
 import { globalRefreshProject } from '../lib/val_project';
 import toast from 'react-hot-toast';
@@ -39,7 +39,7 @@ export default function ProgressDetailProject() {
     }
   }
 
-  useEffect(() => {
+  useShallowEffect(() => {
     onRefresh()
   }, [refresh.get()])
 

src/module/project/ui/results_date-and_task.tsx

@@ -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}>
+    <Box pt={5}>
-      <Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
       <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>

src/module/project/ui/results_file.tsx

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

src/module/project/view/view_create_project.tsx

@@ -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} />
-  );
-}
-

src/module/task/lib/api_task.ts

@@ -26,12 +26,13 @@ export const funGetTaskDivisionById = async (path: string, kategori: string) =>
 }
 
 
-export const funDeleteDetailTask = async (path: string) => {
+export const funDeleteDetailTask = async (path: string, data: { idProject: string }) => {
    const response = await fetch(`/api/task/detail/${path}`, {
       method: "DELETE",
       headers: {
          "Content-Type": "application/json",
       },
+      body: JSON.stringify(data),
    });
    return await response.json().catch(() => null);
 };

src/module/task/ui/detail_list_tugas_task.tsx

@@ -49,7 +49,7 @@ export default function ListTugasDetailTask() {
 
    async function onDelete() {
       try {
-         const res = await funDeleteDetailTask(idData);
+         const res = await funDeleteDetailTask(idData, { idProject: param.detail });
          if (res.success) {
             toast.success(res.message);
             refresh.set(true)

src/module/task/ui/detail_progress_task.tsx

@@ -6,7 +6,7 @@ import { useParams } from "next/navigation";
 import toast from "react-hot-toast";
 import { HiMiniPresentationChartBar } from "react-icons/hi2";
 import { funGetTaskDivisionById } from "../lib/api_task";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { globalRefreshTask } from "../lib/val_task";
 import { useHookstate } from "@hookstate/core";
 
@@ -44,8 +44,7 @@ export default function ProgressDetailTask() {
    }
 
 
-
+   useShallowEffect(() => {
-   useEffect(() => {
       onRefresh()
    }, [refresh.get()])
 
@@ -56,44 +55,44 @@ export default function ProgressDetailTask() {
    return (
       <Box mt={10}>
          {loading ?
-             <Skeleton width={"100%"} height={100} radius={"md"} />
+            <Skeleton width={"100%"} height={100} radius={"md"} />
-            : 
+            :
-         <Box
+            <Box
-            p={20}
+               p={20}
-            bg={"#DCEED8"}
+               bg={"#DCEED8"}
-            style={{
+               style={{
-               borderRadius: 10,
+                  borderRadius: 10,
-            }}
+               }}
-         >
+            >
-            <Grid gutter={"lg"}>
+               <Grid gutter={"lg"}>
-               <Grid.Col span={3}>
+                  <Grid.Col span={3}>
-                  <ActionIcon
+                     <ActionIcon
-                     variant="gradient"
+                        variant="gradient"
-                     size={68}
+                        size={68}
-                     aria-label="Gradient action icon"
+                        aria-label="Gradient action icon"
-                     radius={100}
+                        radius={100}
-                     gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
+                        gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
-                  >
+                     >
-                     <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
+                        <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
-                  </ActionIcon>
+                     </ActionIcon>
-               </Grid.Col>
+                  </Grid.Col>
-               <Grid.Col span={9}>
+                  <Grid.Col span={9}>
-                  <Box>
+                     <Box>
-                     <Text>Kemajuan Proyek {valProgress}%</Text>
+                        <Text>Kemajuan Proyek {valProgress}%</Text>
-                     <Progress
+                        <Progress
-                        style={{
+                           style={{
-                           border: `1px solid ${"#BDBDBD"}`,
+                              border: `1px solid ${"#BDBDBD"}`,
-                        }}
+                           }}
-                        w={"100%"}
+                           w={"100%"}
-                        color="#FCAA4B"
+                           color="#FCAA4B"
-                        radius="md"
+                           radius="md"
-                        size="xl"
+                           size="xl"
-                        value={valProgress}
+                           value={valProgress}
-                     />
+                        />
-                  </Box>
+                     </Box>
-               </Grid.Col>
+                  </Grid.Col>
-            </Grid>
+               </Grid>
-         </Box>
+            </Box>
          }
       </Box>
    )