Merge branch 'join' into lukman/15-agustus-2024

prisma/schema.prisma

@@ -274,7 +274,7 @@ model DivisionProjectTask {
   DivisionProject DivisionProject @relation(fields: [idProject], references: [id])
   idProject       String
   title           String
-  desc            String          @db.Text
+  desc            String?         @db.Text
   status          Int             @default(0) // 0 = todo, 1 = done
   dateStart       DateTime        @db.Date
   dateEnd         DateTime        @db.Date

src/app/(application)/division/[id]/(fitur-division)/task/create/page.tsx

@@ -1,16 +1,11 @@
-import { ViewCreateTaskDivision } from "@/module/division_new";
+import { CreateTask, FileSave } from "@/module/task";
-import { ViewDateEndTask, CreateUsersProject, ViewFileSave } from "@/module/project";
 
 function Page({ searchParams }: { searchParams: any }) {
-   if (searchParams.page == "task")
-      return <ViewDateEndTask kategori="task"/>;
-   if (searchParams.page == "create-users")
-      return <CreateUsersProject kategori="task"/>
-   if (searchParams.page == "file-save")
-      return <ViewFileSave kategori="task"/>
 
-   return <ViewCreateTaskDivision searchParams={searchParams} />
+   if (searchParams.page == "file-save")
+      return <FileSave kategori="task" />
+
+   return <CreateTask />
 }
 
-export default Page
+export default Page
-// onClick={() => router.push('/document?page=list-document')}

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

@@ -1,3 +1,4 @@
+
 import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
 import _, { result } from "lodash";
@@ -91,3 +92,4 @@ export async function GET(request: Request, context: { params: { id: string } })
         );
     }
 }
+

src/app/api/task/route.ts

@@ -67,9 +67,6 @@ export async function GET(request: Request) {
          member: v.DivisionProjectMember.length
       }))
 
-      console.log('amalia', formatData)
-
-
       return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data, }, { status: 200 });
 
    } catch (error) {

src/module/division_new/_division_fitur/task/view/view_create_division_task.tsx

@@ -1,7 +0,0 @@
-import CreateTask from "../component/create_task";
-
-export default function ViewCreateTaskDivision({ searchParams }: { searchParams: any }) {
-   return (
-      <CreateTask searchParams={searchParams} />
-   );
-}

src/module/division_new/index.ts

@@ -9,7 +9,6 @@ import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_
 import ViewHistoryDivisionCalender from "./_division_fitur/calender/view/view_history_division_calender";
 import ViewUpdateDivisionCalender from "./_division_fitur/calender/view/view_update_division_calender";
 import ViewDocumentDivision from "./_division_fitur/document/view/view_document_division";
-import ViewCreateTaskDivision from "./_division_fitur/task/view/view_create_division_task";
 import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task";
 import ViewUpdateProgressDivisionTask from "./_division_fitur/task/view/view_update_progress_division_task";
 import CreateAdminDivision from "./ui/create_admin_division";
@@ -27,6 +26,7 @@ import CreateAnggotaDivision from './ui/create_anggota_division';
 import EditDivision from './ui/edit_division';
 import CreateReport from './ui/create_report';
 import ReportDivisionId from './ui/report_division_id';
+import { funGetDivisionById } from './lib/api_division';
 
 export { CreateUsers };
 export { CreateAdminDivision };
@@ -34,7 +34,6 @@ export { ViewDetailDivisionTask };
 export { ViewUpdateProgressDivisionTask };
 export { ViewDivisionCalender };
 export { ViewCreateDivisionCalender };
-export { ViewCreateTaskDivision };
 export { UlangiEvent };
 export { CreateUserDivisionCalender };
 export { ViewHistoryDivisionCalender };
@@ -57,3 +56,4 @@ export { CreateAnggotaDivision }
 export { EditDivision }
 export { CreateReport }
 export { ReportDivisionId }
+export { funGetDivisionById }

src/module/task/index.ts

@@ -1,5 +1,13 @@
+import ViewDateEndTask from "./ui/create_date_end_task";
+import CreateTask from "./ui/create_task";
+import CreateUsersProject from "./ui/create_users_project";
+import FileSave from "./ui/file_save";
 import NavbarDivisionTask from "./ui/navbar_division_task";
 import TabsDivisionTask from "./ui/tabs_division_task";
 
 export { NavbarDivisionTask }
-export { TabsDivisionTask }
+export { TabsDivisionTask }
+export { CreateTask }
+export { ViewDateEndTask }
+export { CreateUsersProject }
+export { FileSave }

src/module/task/lib/type_task.ts

@@ -0,0 +1,20 @@
+export interface IDataTask {
+   id: string
+   title: string
+   desc: string,
+   status: number,
+   progress: number,
+   member: number
+}
+
+export interface IFormMemberTask {
+   idUser: string,
+   name: string
+}
+
+
+export interface IFormDateTask {
+   dateStart: Date,
+   dateEnd: Date,
+   title: string
+}

src/module/task/lib/val_task.ts

@@ -0,0 +1,4 @@
+import { hookstate } from "@hookstate/core";
+import { IFormMemberTask } from "./type_task";
+
+export const globalMemberTask = hookstate<IFormMemberTask[]>([]);

src/module/task/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 { IFormDateTask } from "../lib/type_task";
+import moment from "moment";
+
+
+export default function ViewDateEndTask({ onClose }: { onClose: (val: IFormDateTask) => 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/task/ui/create_task.tsx

@@ -0,0 +1,205 @@
+"use client";
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { Avatar, Box, Button, Center, Flex, Group, Input, Stack, Text } 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 CreateUsersProject from "./create_users_project";
+import ResultsDateAndTask from "./results_date-and_task";
+import ResultsFile from "./results_file";
+import { useHookstate } from "@hookstate/core";
+import { globalMemberTask } from "../lib/val_task";
+import ViewDateEndTask from "./create_date_end_task";
+import { IFormDateTask } from "../lib/type_task";
+
+export default function CreateTask() {
+  const router = useRouter();
+  const [openDrawer, setOpenDrawer] = useState(false)
+  const [openMember, setOpenMember] = useState(false)
+  const [openTugas, setOpenTugas] = useState(false)
+  const member = useHookstate(globalMemberTask)
+  const [dataTask, setDataTask] = useState<IFormDateTask[]>([])
+
+
+  if (openTugas) return <ViewDateEndTask onClose={(val) => {
+    setDataTask([...dataTask, val])
+    setOpenTugas(false)
+  }} />;
+  if (openMember) return <CreateUsersProject onClose={() => setOpenMember(false)} />
+
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="" title="tambah tugas" menu />
+      <Box p={20}>
+        <Stack>
+          <Input
+            styles={{
+              input: {
+                border: `1px solid ${"#D6D8F6"}`,
+                borderRadius: 10,
+              },
+            }}
+            placeholder="Nama Proyek"
+            size="md"
+          />
+          <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={() => setOpenMember(true)}>
+            <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>
+        {
+          dataTask.length > 0 &&
+          <Box pt={20}>
+            <Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
+            {
+              dataTask.map((v, i) => {
+                return (
+                  <Box key={i}>
+                    <ResultsDateAndTask dateStart={v.dateStart} dateEnd={v.dateEnd} title={v.title} />
+                  </Box>
+                )
+              })
+            }
+          </Box>
+        }
+
+        {/* <ResultsFile /> */}
+
+        {
+          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={() => router.push('/task')}>
+            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("/task/create?page=file-save")}>
+            <Box
+              bg={"#DCEED8"}
+              style={{
+                border: `1px solid ${"#D6D8F6"}`,
+                padding: 20,
+                borderRadius: 10,
+              }}
+            >
+              <Center>
+                <BsFiletypeCsv size={40} />
+              </Center>
+            </Box>
+            <Text mt={10} ta={"center"}>
+              Pilih file yang
+            </Text>
+            <Text ta={"center"}>sudah ada</Text>
+          </Box>
+        </Flex>
+      </LayoutDrawer>
+    </Box >
+  );
+}

src/module/task/ui/create_users_project.tsx

@@ -0,0 +1,166 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { funGetDivisionById, IDataMemberDivision } from "@/module/division_new";
+import { useHookstate } from "@hookstate/core";
+import {
+  Anchor,
+  Avatar,
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Flex,
+  Group,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams, useRouter } from "next/navigation";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
+import { globalMemberTask } from "../lib/val_task";
+import { FaCheck } from "react-icons/fa6";
+
+export default function CreateUsersProject({ onClose }: { onClose: (val: any) => void }) {
+  const router = useRouter()
+  const param = useParams<{ id: string }>()
+  const [selectedFiles, setSelectedFiles] = useState<any>([])
+  const [isData, setData] = useState<IDataMemberDivision[]>([])
+  const member = useHookstate(globalMemberTask)
+  const [selectAll, setSelectAll] = useState(false)
+
+
+  async function getData() {
+    try {
+      const response = await funGetDivisionById(param.id)
+      if (response.success) {
+        setData(response.data.member)
+        if (member.length > 0) {
+          setSelectedFiles(JSON.parse(JSON.stringify(member.get())))
+        }
+      } else {
+        toast.error(response.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal mendapatkan anggota, coba lagi nanti");
+    }
+  }
+
+
+  useShallowEffect(() => {
+    getData()
+  }, []);
+
+  const handleFileClick = (index: number) => {
+    if (selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
+      setSelectedFiles(selectedFiles.filter((i: any) => i.idUser != isData[index].idUser))
+    } else {
+      setSelectedFiles([...selectedFiles, { idUser: isData[index].idUser, name: isData[index].name }])
+    }
+  };
+
+
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    if (!selectAll) {
+      for (let index = 0; index < isData.length; index++) {
+        if (!selectedFiles.some((i: any) => i.idUser == isData[index].idUser)) {
+          const newArr = {
+            idUser: isData[index].idUser, name: isData[index].name
+          }
+          setSelectedFiles((selectedFiles: any) => [...selectedFiles, newArr])
+        }
+
+      }
+    } else {
+      setSelectedFiles([]);
+    }
+  };
+
+
+  function onSubmit() {
+    if (selectedFiles.length == 0) {
+      return toast.error("Error! silahkan pilih anggota")
+    }
+    member.set(selectedFiles)
+    onClose(true)
+  }
+
+
+  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"
+        /> */}
+        <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+          <Text c={WARNA.biruTua} fw={"bold"}>
+            Pilih Semua Anggota
+          </Text>
+          {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+        </Group>
+        <Box mt={15}>
+          {isData.map((v, i) => {
+            const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+            return (
+              <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
+                <Flex justify={"space-between"} align={"center"}>
+                  <Group>
+                    <Avatar src={"v.image"} alt="it's me" size="lg" />
+                    <Text style={{
+                      cursor: 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}>
+                      {v.name}
+                    </Text>
+                  </Group>
+                  <Text
+                    style={{
+                      cursor: 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      paddingLeft: 20,
+                    }}
+                  >
+                    {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                  </Text>
+                </Flex>
+                <Divider my={"md"} />
+              </Box>
+            );
+          })}
+        </Box>
+        <Box mt={"xl"}>
+          <Button
+            c={"white"}
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => {onSubmit()}}
+          >
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/module/task/ui/drawer_division_task.tsx

@@ -9,7 +9,7 @@ export default function DrawerDivisionTask() {
             <SimpleGrid
                cols={{ base: 3, sm: 3, lg: 3 }}
             >
-               <Flex onClick={() => window.location.href = "/task/create"} justify={'center'} align={'center'} direction={'column'} >
+               <Flex onClick={() => window.location.href = "task/create"} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
                      <IoAddCircle size={30} color={WARNA.biruTua} />
                   </Box>

src/module/task/ui/file_save.tsx

@@ -0,0 +1,88 @@
+'use client'
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { Box, Button, Center, SimpleGrid, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { BsFiletypeCsv } from "react-icons/bs";
+
+const dataFile = [
+  {
+    id: 1,
+    name: "Semua_Proyek.csv",
+  },
+  {
+    id: 2,
+    name: "Proyek_Dinas.csv",
+  },
+  {
+    id: 3,
+    name: "Proyek_Lpd.csv",
+  },
+  {
+    id: 4,
+    name: "Proyek_Lembaga1.csv",
+  },
+  {
+    id: 5,
+    name: "Proyek_Lembaga2.csv",
+  },
+  {
+    id: 6,
+    name: "Proyek_Lembaga3.csv",
+  },
+];
+
+
+export default function FileSave({ kategori }: { kategori: string }) {
+  const router = useRouter()
+  const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
+
+  const handleFileClick = (index: number) => {
+    setSelectedFiles((prevSelectedFiles) => ({
+      ...prevSelectedFiles,
+      [index]: !prevSelectedFiles[index],
+    }));
+  };
+
+  return (
+    <Box>
+      <LayoutNavbarNew back="" title="File Tersimpan" menu />
+      <Box p={20}>
+        <SimpleGrid
+          cols={{ base: 2, sm: 2, lg: 2 }}
+          spacing={{ base: 20, sm: "xl" }}
+          verticalSpacing={{ base: "md", sm: "xl" }}
+        >
+          {dataFile.map((file, index) => {
+            const isSelected = selectedFiles[index];
+            return (
+              <Box key={index} mb={20}>
+                <Box
+                  bg={"#DCEED8"}
+                  style={{
+                    border: `${isSelected ? "2px solid #FFC107" : "1px solid #D6D8F6"}`,
+                    borderRadius: 10,
+                  }}
+                  py={30}
+                  onClick={() => handleFileClick(index)}
+                >
+                  <Center>
+                    <BsFiletypeCsv size={80} />
+                  </Center>
+                </Box>
+                <Text mt={10} ta="center">
+                  {file.name}
+                </Text>
+              </Box>
+            );
+          })}
+        </SimpleGrid>
+        <Box mt="xl">
+          <Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => router.push(`/${kategori}/create?anggota=yes&files=yes&button=yes`)}>
+            Simpan
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/module/task/ui/list_division_task.tsx

@@ -1,9 +1,13 @@
 import { WARNA } from "@/module/_global";
 import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Text, TextInput, Title } from "@mantine/core";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiOutlineListBullet, HiSquares2X2 } from "react-icons/hi2";
 import { MdAccountCircle } from "react-icons/md";
+import { IDataTask } from "../lib/type_task";
+import { funGetAllTask } from "../lib/api_task";
+import toast from "react-hot-toast";
+import { useShallowEffect } from "@mantine/hooks";
 
 
 const dataProject = [
@@ -51,14 +55,47 @@ const dataProject = [
    },
 ]
 
-export default function ListDivisionTask({ status }: { status: string }) {
+export default function ListDivisionTask() {
    const [isList, setIsList] = useState(false)
    const router = useRouter()
+   const [isData, setData] = useState<IDataTask[]>([])
+   const param = useParams<{ id: string }>()
+   const searchParams = useSearchParams()
+   const status = searchParams.get('status')
+   const [searchQuery, setSearchQuery] = useState('')
+   const [loading, setLoading] = useState(true);
 
    const handleList = () => {
       setIsList(!isList)
    }
 
+   const fetchData = async () => {
+      try {
+         setData([]);
+         setLoading(true);
+
+         const response = await funGetAllTask('?division=' + param.id + '&status=' + status + '&search=' + searchQuery)
+
+         if (response.success) {
+            setData(response?.data)
+         } else {
+            toast.error(response.message);
+         }
+
+         setLoading(false);
+      } catch (error) {
+         toast.error("Gagal mendapatkan tugas divisi, coba lagi nanti");
+         console.error(error);
+      } finally {
+         setLoading(false);
+      }
+   };
+
+
+   useShallowEffect(() => {
+      fetchData();
+   }, [status, searchQuery]);
+
    return (
       <Box py={20}>
          <Grid justify='center' align='center'>
@@ -91,12 +128,12 @@ export default function ListDivisionTask({ status }: { status: string }) {
             <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
                <Text fw={'bold'} c={WARNA.biruTua}>Total Proyek</Text>
                <Flex justify={'center'} align={'center'} h={'100%'}>
-                  <Text fz={40} fw={'bold'} c={WARNA.biruTua}>35</Text>
+                  <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
                </Flex>
             </Box>
             {isList ? (
                <Box pt={20}>
-                  {dataProject.map((v, i) => {
+                  {isData.map((v, i) => {
                      return (
                         <Box key={i}>
                            <Group justify="space-between" mb={10} onClick={() => router.push(`/task/${v.id}`)}>
@@ -118,9 +155,6 @@ export default function ListDivisionTask({ status }: { status: string }) {
                                  </Center>
                                  <Text>{v.title}</Text>
                               </Group>
-                              {/* <Box>
-                                 <RiCircleFill size={12} color={v.color} />
-                              </Box> */}
                            </Group>
                            <Divider my="sm" />
                         </Box>
@@ -129,7 +163,7 @@ export default function ListDivisionTask({ status }: { status: string }) {
                </Box>
             ) : (
                <Box pt={20}>
-                  {dataProject.map((v, i) => {
+                  {isData.map((v: any, i: any) => {
                      return (
                         <Box key={i} mb={20}>
                            <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/task/${v.id}`)}>
@@ -146,7 +180,7 @@ export default function ListDivisionTask({ status }: { status: string }) {
                                        <Progress.Label>{(status == 'segera') ? 0 : (status == 'dikerjakan') ? 42 : (status == 'selesai') ? 100 : 0}%</Progress.Label>
                                     </Progress.Section>
                                  </Progress.Root>
-                                 <Text my={10}>{v.description}</Text>
+                                 <Text my={10}>{v.desc}</Text>
                                  <Group align='center' pt={10} justify='space-between'>
                                     <Badge color={'dark'}>{status}</Badge>
                                     <Avatar.Group>

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

@@ -0,0 +1,56 @@
+import { WARNA } from '@/module/_global';
+import { Box, Group, SimpleGrid, Text } from '@mantine/core';
+import React from 'react';
+import { AiOutlineFileSync } from "react-icons/ai";
+import { IFormDateTask } from '../lib/type_task';
+import moment from 'moment';
+
+export default function ResultsDateAndTask(data: IFormDateTask) {
+  return (
+    <Box pt={5}>
+      <Box bg={"white"} style={{
+        borderRadius: 10,
+        border: `1px solid ${"#D6D8F6"}`,
+        padding: 20
+      }}>
+        <Box style={{
+          borderRadius: 10,
+          border: `1px solid ${"#D6D8F6"}`,
+          padding: 10
+        }}>
+          <Group>
+            <AiOutlineFileSync size={25} />
+            <Text>{data.title}</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>{moment(data.dateStart).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>{moment(data.dateEnd).format('DD-MM-YYYY')}</Text>
+              </Group>
+            </Box>
+          </SimpleGrid>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+

src/module/task/ui/results_file.tsx

@@ -0,0 +1,38 @@
+import { WARNA } from '@/module/_global';
+import { Box, Group, Text } from '@mantine/core';
+import React from 'react';
+import { BsFiletypeCsv } from 'react-icons/bs';
+
+export default function ResultsFile() {
+  return (
+   <Box pt={20}>
+      <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+      <Box bg={"white"} style={{
+        borderRadius: 10,
+        border: `1px solid ${"#D6D8F6"}`,
+        padding: 20
+      }}>
+        <Box style={{
+          borderRadius: 10,
+          border: `1px solid ${"#D6D8F6"}`,
+          padding: 10
+        }} mb={10}>
+          <Group>
+            <BsFiletypeCsv size={25} />
+            <Text>Proyek Laporan Permasyarakatan</Text>
+          </Group>
+        </Box>
+        <Box style={{
+          borderRadius: 10,
+          border: `1px solid ${"#D6D8F6"}`,
+          padding: 10 
+        }}>
+          <Group>
+            <BsFiletypeCsv size={25} />
+            <Text>Proyek Laporan Permasyarakatan</Text>
+          </Group>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

src/module/task/ui/tabs_division_task.tsx

@@ -5,11 +5,11 @@ import { IoCloseCircleOutline } from "react-icons/io5";
 import { RiProgress3Line } from "react-icons/ri";
 import { TbClockPause } from "react-icons/tb";
 import ListDivisionTask from "./list_division_task";
-import { useParams, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function TabsDivisionTask() {
    const iconStyle = { width: rem(20), height: rem(20) };
-   const param = useParams<{ id: string }>()
+   const router = useRouter()
    const searchParams = useSearchParams()
    const status = searchParams.get('status')
 
@@ -21,21 +21,28 @@ export default function TabsDivisionTask() {
                padding: 5,
                borderRadius: 100
             }}>
-               <Tabs.Tab value="0" w={"23%"} leftSection={<TbClockPause style={iconStyle} />}>
+               <Tabs.Tab value="0" w={"23%"}
+                  leftSection={<TbClockPause style={iconStyle} />}
+                  onClick={() => { router.push("?status=0") }}>
                   Segera
                </Tabs.Tab>
-               <Tabs.Tab value="1" w={"28%"} leftSection={<RiProgress3Line style={iconStyle} />}>
+               <Tabs.Tab value="1" w={"28%"}
+                  leftSection={<RiProgress3Line style={iconStyle} />}
+                  onClick={() => { router.push("?status=1") }}>
                   Dikerjakan
                </Tabs.Tab>
-               <Tabs.Tab value="2" w={"23%"} leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}>
+               <Tabs.Tab value="2" w={"23%"}
+                  leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
+                  onClick={() => { router.push("?status=2") }}>
                   Selesai
                </Tabs.Tab>
-               <Tabs.Tab value="3" w={"20%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+               <Tabs.Tab value="3" w={"20%"}
+                  leftSection={<IoCloseCircleOutline style={iconStyle} />}
+                  onClick={() => { router.push("?status=3") }}>
                   Batal
                </Tabs.Tab>
             </Tabs.List>
-
+            <ListDivisionTask />
-            <ListDivisionTask status="segera" />
          </Tabs>
       </Box>
    )